浮动原理 正常文档流
- 没有进行浮动，文档流在垂直方向上一个一个排列。
- 外部的容器的高度会被子容器撑开。
1
2
3
4上面代码的，没有进行浮动，因此此刻外层 div 的 height 会被里面的四个 子div 撑开，height 为四个 子div 的高度之和。
文章图片
正常文档流.png 浮动布局
- 浮动是指元素指定了 float 的 CSS 属性。
- 浮动元素会脱离正常的文档流，向左 / 向右 浮动，直到触碰到父级的边框或者另一个浮动元素。
- 包含浮动元素的父级元素的高度会等于 0。
div.box div {
width: 100px;
height: 100px;
border: 1px solid silver;
float: left;
}
div.content{
width: 150px;
height: 120px;
border: 2px solid black;
}
1
2
3
46666666``
文章图片
浮动布局.png 上面例子显示，容器 box 进行了浮动布局，此刻，它的 height 不会被它内部的 子div 撑开，因此它的高度为 0，所以， 容器 content 会在左上角开始渲染。但是注意，容器 content 里面的内容并不会在左上角开始渲染显示，而是会寻找一个足以显示全部内容的区域进行渲染显示。看例子：
div1 左浮动，2, 3, 4 右浮动：
文章图片
image1.png 【CSS的浮动相关】出现的效果跟上面一样，现在减少容器 content 里面的内容：
文章图片
image2.png 可见，内容减少，它会寻找足以存放内容的区域进行显示。
当然，如果你没有设置容器 content 的宽高，它的宽会被设置为父级元素的 100%，然后高度会被撑开，内容则会寻找足以显示全部内容的区域进行渲染。来看下没有设置宽高的情况：
文章图片
image3.png
文章图片
image4.png 清除浮动
- 浮动元素容器外额外添加一个空元素，并设置CSS，clear: both; （内部高度未变）
1
2
3
46666666- 对浮动元素的父级容器添加CSS，overflow: hidden; 或者 display: table;
div.box {
/*overflow: hidden;
*/
display: table;
}
- 通过容器伪元素进行清除浮动。
div.box:after {
content: ' ';
display: table;
clear: both;
}
div.box {
zoom: 1;
}
文章图片
清除浮动效果.png
