css:float

文章目录

float本质
float特性

1、包裹性
2、自适应性
3、块状化
3、破坏文档流
float参考元素

float与流体布局
clear

float本质

float属性是非常早的一个属性，在当时的互联网带宽就那么一点，不可能出现大片大片的图片砖头布局。float的设计目的只是为了实现文字的环绕效果

用float布局什么内联元素的间隙问题、margin合并问题都没有了，但是这种布局一旦某个列表高度变高了，则下面的列表就可能发生不愿意看到的布局错位，抑或是日后我们需求增加某个元素的宽度，则牵一发而动全身，其他元素必须跟着饿调整，否则样式必乱。也就是说布局脆弱。

float特性

包裹性；
块状化并格式化上下文；
破坏文档流；
没有任何margin合并；

1、包裹性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width:200px;
        }
        .float{
            float: left;
        }
        .float div{
            background: #66afe9;
            width: 128px;
            height: 128px;
        }
    </style>
</head>
<body>

<div class="fathar">
    <div class="float">
        <div></div>
    </div>
</div>

</body>
</html>

可以看到加了float属性的容器大小同子元素大小一样，完整的包裹住，不多一点不少一点。

演示地址：https://bb798sky.github.io/powerful-css/float/float包裹性.html

当把float属性去了，可以看到宽度变大了，元素不再包裹了，而是自适应了。

2、自适应性

如果浮动的元素的子元素不只是一个128px宽度的div，还有一大波文字

float会自适应的同文字一样长

演示地址：https://bb798sky.github.io/powerful-css/float/float自适应性.html

3、块状化

    var span = document.createElement('span')
    document.body.appendChild(span)
    console.log('1.'+window.getComputedStyle(span).display)
    span.style.cssFloat='left'
    console.log('2.'+window.getComputedStyle(span).display)

元素设置了float属性后自动会变成块状元素

在这里插入图片描述

span{
	float:left;
	display:block;/*多余的*/
}
span{
	float:left;
	vertical-algin:middle;/*多余的，块状元素不起作用*/
}

3、破坏文档流

float属性通过破坏文档流来使高度塌陷让文字可以围绕图片。
而文字焕然这种上世纪风格的效果现在已经不流行了，于是float很少发挥其原本的作用，反而被大肆使用满屏布局。
然而“高度塌陷”只是让跟随的内容可以和浮动元素在一个水平线上，但这只是实现“环绕效果”的条件之一，要想实现真正的“环绕效果”，就需要另外一个我们平时不太在意的特性，“行框盒子和浮动元素的不可重叠性”
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行框盒子和浮动元素的不可重叠性</title>
    <style>
        .father{
            width: 180px;
        }
        .img{
            width: 100px;
            height: 100px;
            background: #66afe9;
            float: left;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="img"></div>
    我是一串很长的字符串我是一串很长的字符串我是一串很长的字符串一串很长的字符串我是一串很长的字符串
</div>
</body>
</html>

文字环绕效果是由高度塌陷和行框盒子和浮动元素的不可重叠性决定的

float参考元素

float的参考元素是“行框盒子”，因为css浮动设计的初衷就是实现文字的环绕效果。

float与流体布局

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行框盒子和浮动元素的不可重叠性</title>
    <style>
        .father{
            width: 500px;
        }
        .prev {
            float: left;
        }

        .next {
            float: right;
        }

        .title {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="father">
    <a href="" class="prev">&laquo;上一章</a>
    <a href="" class="next">下一章&raquo;</a>
    <h3 class="title">第112章 动物环绕</h3>
</div>
</body>
</html>

左右连接加上float属性使其高度塌陷，让后边的h3元素上来。
在这里插入图片描述

.title的左右margin是借助流体特征，保证不会和两个文字链接重叠

clear

clear的官方解释是：“元素盒子的边不能和前面的浮动元素相邻”

   li {
            list-style: none;
            width: 20px;
            height: 20px;
            float: left;
            background: #66afe9;
            border: 1px solid red;
        }
        li:nth-of-type(3){
            clear: both;
        }

演示地址：https://bb798sky.github.io/powerful-css/float/clear/clear清除浮动.html
在这里插入图片描述

clear:both;

我们容易被这个both这个单词误导，所以很多人认为是3行，但实际上只会心啊是两行，原因就是“clear属性是让自身不能和前面的浮动元素相邻”。
因此float:left和clear:both同clear:both效果一样，所以以后还是直接使用clear:both吧