清除浮动

不清除浮动的一个常见危害是高度塌陷。关于高度,下面说这么几种状况:css

  1. 若是父元素已经规定了度,不会高度塌陷,但可能会溢出(若是子元素总高度超过父元素的话)
  2. 若是父元素没有规定高度:
    2.1 若是全部子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素
    2.2 若是存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,因此若是浮动子元素更高的话,仍是会塌陷

解决浮动的办法: clear:both,不容许元素两侧有浮动(你能够理解为,遇到浮动元素会往下挪,从而撑起高度)html

  1. 使用::after伪元素
.cl{zoom:1;}
.cl::after{content:'';display:block;height:0;visibility:hidden;clear:both;}

 

加两个点是CSS3新规,兼容的话一个点就好spa

  1. 直接为父元素创建一个清除浮动的最末子元素,如
<div>
    <div style="float:left;">I M LEFT</div>
    <div style="float:right;">I M RIGHT</div>
    <div style="clear:both;"></div>
</div>

  

缺点在于建立了没必要要的节点,因此广泛作法是第一种code

相关文章
相关标签/搜索
本站公众号
   欢迎关注本站公众号,获取更多信息