清除浮动常用的三种方法

1、什么是浮动
浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素
2、浮动会带来什么负面效果
a)会造成父元素塌陷,如果父元素有背景色,则不会显示
b)会使紧随其后的行内元素围绕排列
c)会使紧随其后的块状元素被覆盖
所以,只要有浮动产生,我们就必须清除浮动
3、清除浮动常用的三种方法
(1)添加一个空标签,这也是初学者最常用的方式
<div style='clear:both;'></div>
我们在父级标签结束之前加入此div引入clear:both;样式,这种清除浮动的方式优点是通俗易懂,适合初学者,缺点是会给页面添加很多无意义的空标签,影响代码的结构和语义化
(2)给父元素添加overflow:hidden样式(不推荐使用)
(3)使用伪元素:after
 


<div class="box">
        <div class="left-box" style='float:left'>左边</div>
        <div class="right-box" style='float:right'>右边</div>
</div>

.box:after{
        display: "block"; 
        clear:both; 
        height:0; 
        content: ""; 
        visibility: hidden; 
        overflow:hidden; 
}


推荐使用第三种方法清除浮动
 

0 个评论

要回复文章请先登录注册