css清除浮动

清除浮动

起因：

<div class="div1">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
    </ul>
</div>

<div class = "div2">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
    </ul>
</div>

给li设置浮动，预期在每个盒子中浮动，但实际却没有了div的界限，直接li浮动到li了

1552983922075.png

解决：

1.给父盒子设定高度

在实际开发中不适用，高度写死了，高度一旦小于内容本来的高度就又没有用了，如果一个元素要浮动,那么它的祖先元素一定要有高度，有高度的盒子才能关住浮动

2.用clear：both

clear:both; clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别人对我的影响，直接对div添加该属性可以清除浮动，但是有一个非常大的,并且致命的问题,margin失效了,两个div之间没有缝隙

3.隔墙法

外墙法：

<div class="div1">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
        <li>aaaaa</li>
   
    </ul>
</div>
<div class = "qiang"></div>
<div class = "div2">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
    </ul>
</div>

.qiang{
    clear: both;
}

该方法通过div.qiang堵墙将两个父类分隔,弥补了clear:both方法中margin无效的情况,可以通过设置墙的高度来控制间隙,

内墙法：

• 内墙法：

1   <div>
2       <p></p>
3       <p></p>
4       <p></p>
5       <div class="qiang"></div>
6   </div>
7
8   <div>
9       <p></p>
10      <p></p>
11      <p></p>
12  </div>
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

4.overflow:hidden;

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方，并且,overflow:hidden;能够让margin生效。另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

<div class="div1 clearfix">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
        <li>aaaaa</li>
        <div class = "qiang"></div>
    </ul>
</div>

<div class = "div2">
    <ul>
        <li>aaaaa</li>
        <li>sssss</li>
        <li>ddddd</li>
        <li>fffff</li>
        <li>ggggg</li>
    </ul>
</div>

首先给浮动的元素加一个父容器，给这个父容器添加一个样式 clearfix。以前总是加一个<div sytle="clear:both"></div>来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器、