浮动,float
意思就是把元素从常规文档流中拿出来。
浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。
如果浮动元素后面有两个段落,而你只想让第一段与浮动元素并列(就算旁边还能 放下第二段,也不想让它上来),怎么办?用 clear 属性来“清除”第二段,然后它 就乖乖地呆在浮动元素下面了。
clear:left
clear:right
clear:both
浮动元素位于“文档流外 部”,因而它已经不被包含在标记中的父元素之内了。正因为如此,它对布局可能产 生破坏性影响。
方法一,为父元素添加overflow:hidden
这个方法很简单,缺点是不太直观,即为父元素应用overflow:hidden
,以强制它 包围浮动元素。
实际上,overflow:hidden
声明的真正用途是防止包含元素被超大内容撑大。应用 overflow:hidden
之后,包含元素依然保持其设定的宽度,而超大的子内容则会被容 器剪切掉。除此之外,overflow:hidden
还有另一个作用,即它能可靠地迫使父元素 包含其浮动的子元素。
方法二,同时浮动父元素
父元素包围其浮动子元素,同时让父元素浮动起来。
方法三,添加非浮动的清除元素
强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此包含元素一定会包含这个子元素——以及前面的浮动元素。