带你了解浮动以及清除浮动的四种方法

首先，先认识一下标准流
css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位
标准流也被称为文档流，是指在不借助任何特殊的css排列规则元素的排布规则。
标准流的特性：

空白折叠现象：比如，如果我们想让img标签之间没有空隙，必须紧密连接： <img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
内容高矮不齐，底边对齐：
自动换行
浮动是css里面布局用的最多的属性

两个元素并排了，附上代码：
box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 400px;
height: 400px;
background-color: skyblue;
}

浮动想学好，一定要知道三个性质。
1.浮动的元素脱标
证明1：
.box1{
float: left;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.box2{
width: 300px;
height: 300px;
/* float: left; */
background-color: skyblue;
}

在这里插入图片描述
box1脱离文档流，覆盖在box2上面。
证明2：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
2 .浮动的元素互相贴靠
如果有足够空间，那么就会靠着box2哥。如果没有足够的空间，那么会靠着box1号大哥。
如果没有足够的空间靠着box1号大哥，自己去贴左墙。
在这里插入图片描述

3.浮动的元素有“字围”效果

4. 浮动的元素收缩
一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。

  .box1{
                float: left;
    			/* width: 300px;
    			height: 400px; 没有设置宽高度*/
    			background-color: yellowgreen;
    }
    .box2{
                float: left;
    			width: 100px;
    			height: 100px;
    			background-color: skyblue;
    }
    .box3{
                 float: left;
    			width: 300px;
    			height: 300px;
    			background-color: darkblue;
    }

接下来是浮动的关键：清除浮动：
现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。

   <div class="main">
        <div class="box1">
            <ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
                <li>vue</li>
            </ul>
        </div>
        <div class="box2">
            <ul>
                <li>语文</li>
                <li>数学</li>
                <li>英语</li>
                <li>物理</li>
            </ul>
        </div>
    </div>

我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。
在这里插入图片描述
原因是父元素没有设置高度，不能给自己浮动的孩子们一个容器。
清除浮动的方法一：给父亲设置高度
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
清除浮动方法二：clear:both;
clear:both;算是最常见的方法吧。
网页制作中，高度height很少出现。因为如果把高度写死了，之后内容过多的时候页面就会乱了。会被后端人员骂死了。
有人就提出疑问了能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

  .main ul li{
         float: left;
         background: red;
         list-style: none;
     }
    .main div{
        /* height: 50px; */
        border: 1px solid salmon;
    }
    .box2{
        clear: both;
        margin-top: 5px;
    }

给box2加了一个clear:both;的样式，效果如下：

在这里插入图片描述
这种方法有一个非常大的、致命的问题，margin失效了。
清除浮动三：隔墙法

 <div class="main">
        <div class="box1">
            <ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
                <li>vue</li>
            </ul>
        </div>
        <divc class="h20"></div>
        <div class="box2">
            <ul>
                <li>语文</li>
                <li>数学</li>
                <li>英语</li>
                <li>物理</li>
            </ul>
        </div>
    </div>

中间加一个div撑开当作两个div之间的距离，并且清除浮动。
在这里插入图片描述

 .h20{
        height: 20px;
        clear: both;
    }

这些年出现了一种内墙法

 <div class="box1">
            <ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
                <li>vue</li>
                <div class="clear"></div>
            </ul>
        </div>
.clear{
        clear: both;
   }

就是再浮动的元素下面加多一个类专门清除浮动的。这样做父类~~删除线格式~~ 也能被儿子撑出高度，也会消除浮动带来的影响。（我用的最多的一种）
清除浮动三：overflow:hidden;
overflow:hidden;原本表示溢出隐藏。
也可以用来解决一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给浮动元素父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
这个现象，不能解释，就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。

带你了解浮动以及清除浮动的四种方法

猜你喜欢