CSS3 浮动 （十二）

CSS3 浮动 （十二）

标签（空格分隔）： 前端学习

---

参考：MDN
浮动元素会脱离正常的文档布局流，更具设置的float属性值吸附于父元素的相应位置，正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其剩余空间。
要注意的是浮动内容任然会遵循盒子模型注入外边距和边界。

清除浮动
可以使用clear属性来清除元素的浮动，表示这个元素和源码中后面的元素将不浮动，除非你稍后将一个新的float声明应用到此后的另一个元素。
clear属性可以取三个值：

• left：停止任何活动的左浮动
• right：停止任何活动的右浮动
• both：停止任何活动的左右浮动
  还以一个更加推荐的clearfix，这是bootstrap正在使用的,定义如下代码即可：

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; 
}

闭合浮动
详情：如何理解浮动布局

• 可以通过添加额外的标签
• 可以使用br标签和其自身的html属性
• 父元素设置overflow: hidden
• 父元素设置display: table

浮动问题
整个宽度难以计算
当向浮动框中添加背景、外边距、内边距等会出现问题。浮动元素存在与正常的文档流布局之外。

• 浮动元素在父元素中所占面积的有效值为0.
• 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，简而言之就是margin属性无效

解决方法：
使用替代(IE)盒模型，设置box-sizing:border-box来改变盒模型为IE盒模型。