CSS —— 清除浮动

最新推荐文章于 2023-01-08 20:12:59 发布

jingayy

最新推荐文章于 2023-01-08 20:12:59 发布

阅读量292

点赞数 1

分类专栏：前端-css 文章标签： css

本文链接：https://blog.csdn.net/jingayy/article/details/119171268

版权

前端-css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么要清除浮动？

因为浮动元素脱离标准流（不占位置），不会撑开父元素，会影响其他元素的布局。为了不影响其他元素的布局会给浮动元素的父元素一个指定的高度。

如下代码所示，如果给浮动元素的父元素设置高

<body>
<div class="father">father
    <div class="son">son1</div>
    <div class="son">son2</div>
    <div class="son">son3</div>
</div>
<div class="brother">brother</div>
</body>

.father{
    height: 200px;
    background-color: #ff7c2d;
}
.son{
    float:left;
    height: 200px;
    width:150px;
    background-color: #bfbfbf;
}
.brother{
    height: 150px;
    background-color: #00a4ff;
}

则效果如下：

如果不给浮动元素的父元素设置高:

<body>
<div class="father">father
    <div class="son">son1</div>
    <div class="son">son2</div>
    <div class="son">son3</div>
</div>
<div class="brother">brother</div>
</body>

.father{
    /*height:200px;*/
    background-color: #ff7c2d;
}
.son{
    float:left;
    height: 200px;
    width:150px;
    background-color: #bfbfbf;
}
.brother{
    height: 150px;
    background-color: #00a4ff;
}

则效果如下（下面的元素会跑到上面去，破坏布局）：

为了方便增删内容，不能给浮动元素的父盒子指定高度,需要让子盒子撑开父亲，这时候就需要清除浮动了。（也就是说只有在父元素没有给高度时才需要清除浮动）

清除浮动的本质是什么？

清除浮动的本质就是清除浮动元素造成的影响。

清除浮动的语法

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动（清除左侧浮动的影响）
right	不允许右侧有浮动（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

（实际开发中，基本上只用clear：both）

清除浮动的策略是闭合浮动。

简单来说就是只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动的方式

1. 额外标签法（也叫隔墙法，是W3C推荐的做法）

在最后一个浮动的盒子后面加一个块级盒子（必须是块级元素），为这个块级盒子添加清除浮动的语法。

额外标签法的缺点是：添加许多无意义的标签，结构化较差。

额外标签法在实际工作中可能会遇到，但不常用。

2. 给浮动元素的父级元素添加overflow

overfolw:hidden;

overflow的属性值还可以设置为auto或者是scroll，但最常用的是hidden。

这种方法的缺点是无法显示溢出部分。

3. 给浮动元素的父级元素添加 :after伪类元素，是额外标签法的升级版。

代码如下：

.clearfix:after{
content:"";    /*content是伪类元素里的必须属性*/
display:bolck; /*伪类元素是行内元素，需要转化为块级元素*/
height:0;    
clear:both;
visibility:hidden;
}
/*照顾低版本浏览器*/
.clearfix{/*zoom是IE6 ,7专有的属性*/
*zoom:1;
}

缺点：需要照顾低版本浏览器。

代表网站：百度淘宝网网易

4.给浮动元素的父级元素添加双伪元素清除浮动

代码如下：

.clearfix:before,
.clearfix:after{
cnotent:"";
display:table;
}
.clearfix:after{
clerar:both;
}
.clearfix{
*zoom:1;
}

缺点：需要照顾低版本浏览器

代表网站：小米，腾讯等