网页布局,实现水平方向的布局,就会用到浮动,今天用一篇文章总结下如何解决元素浮动对原布局所带来的影响:
BFC:
BFC是块级格式化上下文，是一种显示渲染规则。
介绍：
只有同属一个BFC时且两个元素之间没有阻挡时才会发生margin合并。阻止元素被浮动元素所覆盖。可以将浮动元素包含。
如何生成BFC：
- 设置float为left或者right。
- 设置overflow为hidden、auto、scroll三者中的一种。
- 设置display为inline-block、table-caption、table-cell三者中的一种。
- 设置position为absolute或者fiexd。
BFC作用：
清除浮动，为父元素创建BFC，可以让父元素包含子浮动元素
解决外边距合并问题
消除文字围绕float元素的效果。
浮动元素:
特征：脱离文档正常流，根据设置的浮动方式向左或向右浮动，直到遇到所处容器的的边框或其它浮动元素。
对父容器的影响：会使父容器高度塌陷；
对其它浮动元素的影响：会阻止其它浮动元素继续移动；
对普通元素的影响：普通元素就像感知不到浮动元素的存在，浮动元素会覆盖住普通元素；
对文字的影响：文字能够感知到浮动元素，会环绕浮动元素按顺序显示；
例子:
<head>
<style>
.ct{border:1px solid pink;}
.ct1{float:left;width:100px;background:red;}
.ct2{float:left;width:100px;background:green;}
</style>
</head>
<body>
<div class="ct clear">
<div class="ct1"></div>
<div class="ct2"></div>
</div>
</body>
解决办法:
- 增加空div。
在浮动原色最下方加入一个空的div，并且设置这个div为clear：both；
缺点：增加一个无用的div。
- 使用CSS属性为父元素创建一个BFC，利用BFC可以包含浮动元素的特性清除浮动元素。
缺点：float可能会影响布局，position:absolute;可能得到的结果并不是自己想要的。
- 利用伪类：after清除。(推荐使用)
.clearfix{
zoom:1; /IE6、7*/
}
.clear{
content:" ";
display:block;
clear:both;
}
网友评论