CSS的浮动相关

浮动原理

正常文档流

• 没有进行浮动，文档流在垂直方向上一个一个排列。
• 外部的容器的高度会被子容器撑开。

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

上面代码的，没有进行浮动，因此此刻外层 div 的 height 会被里面的四个 子div 撑开，height 为四个 子div 的高度之和。

正常文档流.png

浮动布局

• 浮动是指元素指定了 float 的 CSS 属性。
• 浮动元素会脱离正常的文档流，向左 / 向右 浮动，直到触碰到父级的边框或者另一个浮动元素。
• 包含浮动元素的父级元素的高度会等于 0。

<style>
    div.box div {
        width: 100px;
        height: 100px;
        border: 1px solid silver;
        float: left;
    }
    div.content{
        width: 150px;
        height: 120px;
        border: 2px solid black;
    }
</style>

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="content">6666666</div>``

浮动布局.png

上面例子显示，容器 box 进行了浮动布局，此刻，它的 height 不会被它内部的 子div 撑开，因此它的高度为 0，所以， 容器 content 会在左上角开始渲染。但是注意，容器 content 里面的内容并不会在左上角开始渲染显示，而是会寻找一个足以显示全部内容的区域进行渲染显示。看例子：

div1 左浮动，2, 3, 4 右浮动：

image1.png

出现的效果跟上面一样，现在减少容器 content 里面的内容：

image2.png

可见，内容减少，它会寻找足以存放内容的区域进行显示。

当然，如果你没有设置容器 content 的宽高，它的宽会被设置为父级元素的 100%，然后高度会被撑开，内容则会寻找足以显示全部内容的区域进行渲染。来看下没有设置宽高的情况：

image3.png image4.png

清除浮动

• 浮动元素容器外额外添加一个空元素，并设置CSS，clear: both;（内部高度未变）

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div style="clear: both;"></div>
<div class="content">
    6666666
</div>

• 对浮动元素的父级容器添加CSS，overflow: hidden; 或者 display: table;

div.box {
    /*overflow: hidden;*/
    display: table;
}      

• 通过容器伪元素进行清除浮动。

div.box:after {
    content: ' ';  
    display: table;
    clear: both;
}
div.box {
    zoom: 1;
}

清除浮动效果.png