float及清除

元素浮动脱离文档流(不会对其他元素的布局造成影响)
但不脱离文本流 float本身就是做图文混排文字环绕效果的
对自身的影响:
-> 形成"块"(BFC) 可有自己的布局如p1，若没有float 给文字设置宽高就是无效的
-> 位置尽量靠上
-> 位置尽量靠左float:left(右float:right) 宽度不够会往下掉
对兄弟元素的影响:
-> 上面贴非float元素
-> 旁边贴float元素
-> 不影响其他块级元素的位置
-> 影响其他块级元素的文本
对父级元素的影响:
-> 从父级布局上"消失"
-> 高度塌陷解决这个问题 1.设置父元素变成BFC
2.其他非float元素超出float的区域使用::after
设置content:'' height:0 display:block visibility: hidden clear:both
3.在父元素的最后加一个空的div<div style="clear:both"></div>
4.父级元素手动定义高度(高度固定时使用)
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .container{
            background: red;
            width: 400px;
            /*margin: 20px;*/
        }
        .p1{
            background: #6f42c1;
            float: left;
            width: 200px;
            height: 50px;
        }
        /*经典清除浮动的方式*/
        .container2::after{
            content: '';
            /*after默认inline 所以要设置block*/
            display: block;
            clear: both; /*保证这个元素的左右两边没有浮动元素*/
            /*因为浮动元素是靠上靠左的 所以加的元素只能在下方*/
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
   
    <div class="container">
        <span class="p1">
            float
        </span>
        <span class="p2">
            好长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的字
        </span>
    </div>
    <div class="container container2">
        <span>
            几个几个几个的字
        </span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height: 200px; background: blue"></div>
</body>
</html>

如何清除浮动(浮动的元素不会占用父元素的布局空间，可能会对其他元素产生影响比如父级塌陷等)
-> 让盒子负责自己的布局
-> 父元素overflow:hidden(auto)
-> ::after{clear:both}(页面最后空白元素)

float及清除

推荐阅读更多精彩内容