您的位置：首页 > Web前端 > CSS

CSS清浮动处理（Clear与BFC）

2016-03-07 00:38 513 查看

在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼

1 浮动带来布局的便利，却也带来了新问题

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="浮动布局的弊端"/>
<style type="text/css">
.bow1{border:3px solid red;}
.bow2{background:green;width:50px;height:50px;border:1px solid black;float:left;}
.bow3{background:gray;width:50px;height:50px;border:1px solid black;float:left;}
.bow4{background:yellow;width:50px;height:50px;border:1px solid black;float:left;}
</style>
</head>
<body>
<div class="bow1">
<div class="bow2"></div>
<div class="bow3"></div>
<div class="bow4"></div>

</div>

</body>
</html>

我们希望看到的效果是这样的

但结果却是这样的

父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，我们需要一些清除浮动的技巧。

2 如何清理浮动

清理浮动一般有两种思路

利用 clear属性，清除浮动

使父容器形成BFC

2.1清除浮动的常用几种方法

1、添加额外的标签。

通过在浮动元素末尾添加一个空的标签例如

<div >
<h2>1）清除浮动的第一种方法：添加额外标签</h2>
<div class="head">.</div>
<div class="center"></div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

弊端：会增添许多无意义标签。不好后期维护。

2、通过在浮动元素末尾添加一个<br clear="all"/>

有点：比第一种方法强一点，，这算一个优点么

弊端：违背语义化，有违结构和表现的分离。

3、使用after伪元素

<!doctype html>
<html>
<head>
<meta charset="utf-8"/ content="添加伪类的方法消除浮动">
<style type="text/css">
.bow1{border:3px solid black;}
.box2{background:red;float:left;width:80px;height:100px;}
.box3{background:green;float:left;width:80px;height:100px;}
.clear:after{display:block;content:"";clear:both;}
.clear{zoom:1;}
</style>
</head>
<body>
<div class="bow1 clear">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>

优点：结构和语义化正确，推荐使用
4、父元素添加高度。

弊端：工作中很多都是自适应的。父元素添加高度往往不可行。

5、父元素设置overflow:hidden

弊端：当内容过多时导致内容被隐藏，无法显示需要溢出的元素。

6、父元素也设overflow:auto;

弊端：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等,

7、父元素也设置浮动

弊端：相信我，会因为父元素也发生了浮动，从而产生新的问题。

8、父元素设置display:table

弊端：和模型被改变，会因此造成一系列问题。得不偿失

9.利用position:使得元素周围形成BFC

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航