浮动以及怎样围住浮动元素

浮动，float

意思就是把元素从常规文档流中拿出来。
浮动元素脱离了常规文档流之后，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。
如果浮动元素后面有两个段落，而你只想让第一段与浮动元素并列（就算旁边还能 放下第二段，也不想让它上来），怎么办？用 clear 属性来“清除”第二段，然后它 就乖乖地呆在浮动元素下面了。
clear:left
clear:right
clear:both
浮动元素位于“文档流外 部”，因而它已经不被包含在标记中的父元素之内了。正因为如此，它对布局可能产 生破坏性影响。

方法一，为父元素添加overflow:hidden

这个方法很简单，缺点是不太直观，即为父元素应用overflow:hidden，以强制它 包围浮动元素。
实际上，overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用 overflow:hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容 器剪切掉。除此之外，overflow:hidden还有另一个作用，即它能可靠地迫使父元素 包含其浮动的子元素。

方法二，同时浮动父元素

父元素包围其浮动子元素，同时让父元素浮动起来。

方法三，添加非浮动的清除元素

强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。