CSS 清除浮动
上节课我们有一个现行三列的例子。
这个例子出现了浮动。
CSS 有一个属性clear可以解决浮动的问题。它有4个值：
- left:盒子的左侧不能接触同一个包含元素内的其它任何元素。
- right:盒子的右侧不能接触同一个包含元素内的其它任何元素。
- both:盒子的左侧和右侧都不能接触同一个包含元素内的其它任何元素。
- none:盒子的左侧和右侧都可以接触元素。
要解决上节课的问题，只要给第2行第3列的元素添加规则：clear:left
代码如下：
<!DOCTYPE html><html> <head> <title>元素并排</title> <meta charset="UTF-8"> <style type="text/css"> body { width: 750px; color: #fff;} p { width: 230px; float: left; margin: 5px; padding: 5px; Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 16px; border-radius: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important;"> .clear{clear:left} </style> </head> <body> <h1 style="color:#706fd3">软件开发，成就梦想</h1> <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2> <p>CSS是一个描述HTML文档的样式语言。CSS描述HTML元素的显示方式。</p> <p>本教程将教你CSS从基础到网页布局，学完本教程，可以设计出漂亮的网站。本教程需要HTML知识为基础，学习HTML前往《HTML 教程》</p> <p>你只需下载一个Chrome浏览器和一个Notepad++一样的文本编辑器，另加一个取色器软件，无需其它工具。</p> <p class="clear">教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习，过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>将示例代码，敲入你的文本编辑器，保存，用Chrome浏览器打开；这样的事做得越多，你越有自信。 <p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表， 一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p> </body></html>
