一、浮动的性质

1、浮动的元素脱离标准文档流，并且可以设置宽度和高度。

2、浮动的元素相互贴靠

3、浮动的元素有“文字环绕”效果

含有图片的div浮动，段落不浮动，文字会环绕图片。

4、div浮动了且没有设置宽度，那么将自动收缩为内容的宽度。

浮动（脱标）的元素是不能把容器惩处高度的。

二、浮动的清除

方法1：

给浮动元素的祖先元素加高度。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

换句话说，没有高度的容器无法关住浮动。所有后面盒子里面的浮动元素依然在贴上一个盒子里面浮动的元素。

网页制作的过程中，height属性很少出现，因为能被内容撑高。所以这个方法很少用。

方法2:

为后面浮动元素父亲添加clear: both;属性

1        <div>
2            <ul>
3                <li>HTML</li>
4                <li>CSS</li>
5                <li>JS</li>
6                <li>HTML5</li>
7                <li>设计模式</li>
8            </ul>
9        </div>
10    
11        <div class="box2">  → 这个div写一个clear:both;属性 
12            <ul>
13                <li>学习方法</li>
14                <li>英语水平</li>
15                <li>面试技巧</li>
16            </ul>
17        </div>

致命缺陷：margin 失效。本质原因还是因为两个div都没有高。

方法3：隔墙法

在两个div之间添加一个div

给这个div两个类一个cl 给clear：both属性；一个h16给高度属性，用这个墙撑出高度，这样就避免了margin失效了。

虽然有中间的div(墙)撑出高度，但是前后两个div的高度依然是0。

.cl{
            clear: both;
        }
    .h16{
             height: 16px;
         }

<div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>
    </div>
    
    <div class="cl h16"></div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>

方法4：内墙法

    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
        </ul>

        <div class="cl h16"></div>
    </div>

    <div class="box2">
        <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
        </ul>
    </div>

把墙修在墙内，这样两个div都有高了

方法5：overflow：hidden；

一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。