干货教学-CSS之浮动布局

浮动

在 CSS 中，浮动（float）属性的出现主要是为了实现浮动元素周围文字环绕的效果。例如，在印刷设计中，文本可以围绕图片进行排版，这被称为"文本环绕"。在网页设计中，应用了 float 属性的页面元素就像印刷布局里面被文字包围的图片一样，浮动的元素仍然是网页流的一部分，就像这样。

css 复制代码

img{
	width:50px;
	float:left;
}

他让一个Box脱离了文档流，但是又不像绝对定位那种，虽然脱离了文档流，但是并不会覆盖文字，文字会围绕着图片排版。浮动能让块级元素水平排列。

小tips：浮动元素可以用margin属性设置左右外边距，但是不能使用margin：0 auto来让元素水平居中。

浮动带来的问题

我们准备用ul装三个小li的盒子，然后ul下面放一个Box（title），当我们给li添加浮动，三个小li会去到同一行，按道理来说Box（title）应该在ul的下面，但是Box会因为浮动而跑去ul的同一行。为什么呢？浮动元素脱离文档流，子元素无法撑开父元素的高度，从而会影响后面的元素排版。

清除浮动

为了清除浮动带来的负面影响，以下有5中方法可供参考，常用的是第三种和第五种。

1、设置父元素的高度，给ul添加高度，让他不要塌陷。

2、父容器里添加空元素，并设置clear：both。给ul添加一个空盒子
，并给这个盒子设置属性clear：both

3、父容器里添加伪元素after，并设置content：""，clear：both，display: block;

css 复制代码

ul::after{
	/* 伪元素一定要加上content: ""否则无法生效;*/ 
	content: "";
        /*clear 只适用于块级元素*/
	clear: both;
	display:block;
}

4、给后面受影响的元素设置clear：both，给title添加

scss 复制代码

.title{
	clear：both;
}

5、把父容器设置成BFC容器，设置父元素为overflow：hidden

BFC容器

一个问题：父容器设置magin-top,子容器设置magin-top，父容器正常，按道理来说子容器会相对于父容器的顶部进行定位下来，但是子容器不会下来。另一种情况，父容器没有设置magin-top，子容器设置magin-top，父容器会下来，但是子容器不会相对于父容器的顶部进行定位，这就是magin重叠。magin重叠只发生在上下，左右不会重叠。为了解决这个问题，我们可以将一个容器设置BFC容器，这样就不会有magin重叠的问题了。

css 复制代码

<style>
        ul{
            /* 将一个容器设置成bfc容器 */
            overflow: hidden;
            margin-top: 100px;
            background-color: #eee;
        }
        li:first-child{
            margin: 30px;
            list-style: none;
        }
        li:last-child{
            margin: 30px;
            list-style: none;
        }
</style>
<body>
    <div class="box">
        <ul>
            <li style="width: 200px;height: 50px;background-color: red;">1</li>
            <li style="width: 200px;height: 50px;background-color: blue;">2</li>
        </ul>
    </div>
</body>

1、内部的Box会在垂直方向上一个接一个地放置。

2、bfc容器内部和外部的容器互相隔离，互不影响。----> 解决margin重叠问题

3、bfc容器内，在垂直方向上相邻元素margin会重叠。

4、bfc容器是会把浮动容器的高度计算在内。----> 解决高度塌陷问题清除浮动

触发BFC容器

如何将一个容器设置成BFC容器呢？可以有以下方法。

给容器设置overflow：hidden||auto||scroll||overlay；
给父容器设置 float：left/right；
给父容器设置 position：absolute；
给父容器设置 display：inline-block||inline-xxxx;
给父容器设置 display：table-cell||table-xxxx;
给父容器设置 display：flex||inline-flex;

总结

浮动布局在面试中是非常常见的一道题目，浮动布局让一个Box脱离了文档流，可以实现文字环绕的效果，但是会带来负面影响，他会影响后续的布局，所以要清除浮动，我们有5种常见的方法。后面我们又聊到了BFC容器，主要是用来解决margin重叠问题，要清楚如何触发BFC容器。OK，今天我们就聊到这里，欢迎下次再见！