添加浮动
float 属性规定元素如何浮动。
值 | 描述 |
left | 规定元素浮动到父元素素左侧 |
right | 规定元素浮动到父元素素右侧 |
none | 默认值元素不浮动 |
inherit | 元素继承父元素的float值 |
浮动的元素向左或向右浮动时,直到它的外边框碰到父元素边框或另一个浮动元素的边框为止。
浮动产生的目的是为了做图文混排、文字环绕效果,因为浮动的元素只会压住标准流中的元素不会遮住标准流中的文字,正常布局时应当避免使用float属性(可以选择定位、flex布局)。
元素浮动后将脱离标准流,由于浮动元素父盒子很多情况下不方便给定高度,但是子盒子脱标后不占有位置,最后造成父元素高度为0,因此我们需要清除浮动。
清除浮动的本质
-
清除浮动的本质是清除浮动元素造成的影响。
-
如果父盒子本身有高度,则不需要清除浮动。
-
清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度就不会影响下面的标准流了。
清除浮动的策略是:闭合浮动
清除浮动的方法
1.W3C推荐做法:额外标签法(隔墙法)
此方法是在浮动子元素的末尾添加一个空的标签来闭合浮动(新添加的标签必须是块级元素)
例如:<div style="clear:both"></div>
或者其他标签,(如<br />
等)
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
2.父级添加overflow属性
给父元素添加overflow
属性,将其属性值设置为hidden
,aotu
或scroll
优点:代码简洁
缺点:无法显示溢出部分
3.父级添加after伪元素
优点:结构简单
缺点:不照顾低版本浏览器
4.父级添加双伪元素
此方法与第三种方法差不多,比第三种方法更常见