浮动与BFC容器

引言

在网页设计的演进历程中，CSS浮动布局曾是最具革命性的排版技术之一。它打破了传统文档流"从左到右、从上到下"的线性排列方式，让文字环绕图片、多栏布局等复杂排版成为可能。在理解浮动之前，我们先了解一下文档流。

文档流指浏览器页面默认从左到右，从上到下，排列元素。在块级作用元素后，若我们之间放入3个块级元素，会发现三个不同颜色方块垂直排列，这也就是文档流效果。

如何让这三个不同颜色的方块在同一水平显示呢。我们知道块级元素是独占一行，而行内块可以实现元素水平排列让多个元素在同一行显示，所以我们想到行内元素转化为行内块元素：

js 复制代码

     li{
            width: 300px;
            height: 100px;
            display: inline-block; 
        }

注意：这种方法会产生元素间的空白间隙，这是因为HTML中的换行符和空格被解析为文本节点导致的。不同块间有白色间距解决方法有：

虽然display: inline-block可以解决水平排列问题，但存在以下限制：

故为了更高效地实现布局效果，还需一种新的方式，让页面元素的排列与控制更加便捷------浮动。

基本浮动实现 ：使用 float: left 或 float: right 让元素脱离文档流并向左 / 右浮动。元素浮动后，脱离了文档流，故父容器高度塌陷，高度为0，导致父容器和后续元素重叠。若要实现文字在下一行显示，则需清除浮动。

js 复制代码

 .list{
            margin:0;
            padding: 0;
            font-size: 0;
            height: 100px;
        }

js 复制代码

 <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <div class="clearfix"></div>
    </ul>

js 复制代码

 .title{
            clear: both;
        }

伪元素清除浮动; -----推荐

css 复制代码

 .父容器:after {
        content: "";
        display: block;//after是伪元素
        clear: both;
    }

默认情况下，子容器的margin-top会和父容器的margin-top发生重叠
浮动元素不会被父容器的margin-top所影响
计算BFC的高度时，浮动元素也参与计算
解决margin-top重叠问题：
- 给父容器设置overflow: hidden||auto||scroll||overlay;
- 给父容器设置一个BFC容器

scss 复制代码

- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为以下其中之一的值：inline-block、table-cell、flex   
- 块级元素overflow（非visible值）