CSS——知识点补充（四）元素的浮动属性
前言
浮动是CSS样式中十分重要的一个属性，由于块元素“独占一行”的特性使得我们难以去处理一下复杂的布局，而如果联合浮动一起使用，则能让我们的布局更加灵活。此外，浮动属性由于脱离了文档流，所以会遇到高度塌陷的问题，本篇文章也将对如何解决**高度塌陷 **的方法进行介绍。
一、使用浮动属性
通过浮动可以使一个元素向其父元素的左侧或右侧移动，我们使用float属性来设置于元素的浮动
| 可选值 | 效果 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
注意,元素设置浮动以后，水平布局的等式便不需要强制成立。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
<head>
<meta charset="UTF-8">
<title>使用浮动属性</title>
<style>
#root1 {
width: 150px;
height: 150px;
background-color: thistle;
float: left;
}
#root2 {
width: 150px;
height: 150px;
background-color: skyblue;
float: left;
}
#root3 {
width: 150px;
height: 150px;
background-color: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div id="root1">1</div>
<div id="root2">2</div>
<div id="root3">3</div>
</body>
二、浮动属性的特点
（1）浮动元素会完全脱离文档流，不再占据文档流中的位置
<head>
<meta charset="UTF-8">
<title>使用浮动属性</title>
<style>
#root1{
width: 150px;
height: 150px;
background-color: thistle;
float: left;
}
#root2{
width: 150px;
height: 150px;
background-color: skyblue;
float: right;
}
#root3{
width: 150px;
height: 150px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="root1">1</div>
<div id="root2">2</div>
<div id="root3">3</div>
</body>
（2）设置浮动以后元素会向父元素的左侧或右侧移动，
（3）浮动元素默认不会从父元素中移出
（4）浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
（5）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
（6）浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
<head>
<meta charset="UTF-8">
<title>使用浮动属性</title>
<style>
#root1 {
width: 150px;
height: 150px;
background-color: thistle;
float: left;
}
#root2 {
width: 150px;
height: 150px;
background-color: skyblue;
float: left;
}
#root3 {
width: 150px;
height: 150px;
background-color: yellowgreen;
float: left;
}
#box{
height: 200px;
width: 400px;
border:tomato 10px solid;
}
</style>
</head>
<body>
<div id="root1">1</div>
<div id="box">
<div id="root2">2</div>
</div>
<div id="root3">3</div>
</body>
三、利用浮动实现文字环绕效果
实际上，浮动属性一开始创建出来的原因就是为了实现文字环绕的效果的，只是后来大家发现利用浮动可以很好地处理页面布局的问题，所以现在更多时候是利用它来做布局的功能。。。
<head>
<meta charset="UTF-8">
<title>文字环绕效果</title>
<style>
#root {
width: 200px;
height: 200px;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div>
<div id="root"></div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga ipsa molestiae distinctio suscipit velit ea
eum corrupti nostrum? Esse eligendi officiis culpa repellat sapiente, tenetur aliquid, explicabo,
perferendis alias sunt eos possimus omnis rem laboriosam atque vel libero? Consectetur magnam totam incidunt
quidem! Odit fugit nesciunt nobis. Placeat magni cumque reiciendis assumenda blanditiis omnis exercitationem
voluptatibus accusamus facilis minus sequi sint quod eaque dolorem facere distinctio eos voluptatem eveniet,
labore et rerum illo repellendus? Laudantium dicta vel fugiat dolores minus. Maiores quia doloremque placeat
nihil quidem obcaecati officia quasi suscipit. Facere eligendi consequatur deserunt, quia reprehenderit ab
quos quibusdam, minima aperiam eaque sit, cum magnam exercitationem dolor? Corrupti est suscipit
reprehenderit deleniti. Reiciendis nulla molestiae distinctio vero aut doloribus, numquam exercitationem
fugit totam, adipisci magnam cum itaque, optio temporibus eaque laboriosam eius id soluta accusantium
voluptate culpa! Iste eligendi quia ut. Doloremque necessitatibus, iure dicta officia repudiandae voluptatem
quos. Eius magni quaerat quod distinctio, esse sequi sapiente perspiciatis repellat quo dolor expedita
eveniet adipisci itaque nobis vitae consequatur velit tempora placeat atque deserunt maiores doloremque.
Quidem velit nam unde vero a, eaque voluptatibus laboriosam asperiores excepturi fugit officiis delectus
quas accusamus labore, maiores tempore alias laudantium accusantium suscipit sapiente ducimus, earum
mollitia. Ut, id laudantium et illum, autem explicabo possimus similique incidunt vero quas perspiciatis
obcaecati dolorem nemo beatae tempora nisi quasi quaerat labore expedita asperiores quisquam dolor nihil?
Minima non porro, quibusdam vero, error quo corrupti possimus temporibus ea soluta eius, doloribus quas
repellendus sed. Praesentium explicabo corporis quisquam deserunt aliquid repellat incidunt minus, nobis
laboriosam! Cupiditate, dolores quibusdam fugiat quisquam ipsum illum aperiam excepturi vero! Autem vel
saepe aut, molestias veniam distinctio similique officia commodi ea illo aliquid placeat atque explicabo
quisquam architecto voluptatibus earum accusantium facilis sunt blanditiis cupiditate deleniti doloribus?
Neque itaque officia provident ipsa porro?</p>
</div>
</body>
四、脱离文档流的影响
我们知道，块元素和行内元素在文档流中都有着各自的布局特点，比如块元素独占一行等。那么如果脱离了文档流，块元素和行内元素分别会有什么样的影响呢？
块元素:
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素:
1、行内元素脱高文档流以后会变成块元素，特点和块元素一样
也就是说，一旦脱离文档流以后，我们就不需要再区分块和行内了。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#root1,#root2{
width: 200px;
height: 200px;
float: left;
}
body div{
border: plum solid 10px;
}
body :last-child{
border:tan solid 10px;
}
</style>
</head>
<body>
<div id="root1"></div>
<span id="root2"></span>
</body>
五、清除浮动影响：clear
我们可以看一下下面的案例，在没有使用clear属性前，对于两个兄弟元素，如果前者设置为浮动，那么由于其脱离了文档流，那么后者就会移动到前者原先的位置上。如果我们不想元素受到其他元素的浮动影响，那么就可以通过设置clear属性来解决这个问题。
<head>
<meta charset="UTF-8">
<title>clear清除浮动影响</title>
<style>
#root1,#root2,#root3{
width: 200px;
height: 200px;
}
#root1{
background-color: tomato;
float: left;
}
#root2{
background-color: thistle;
clear: left;
}
</style>
</head>
<body>
<div id="root1"></div>
<div id="root2"></div>
</body>
| 可选值 | 效果 |
|---|---|
| left | 清除左侧浮动元素对当前元素的影响 |
| right | 清除右侧浮动元素对当前元素的影响 |
| both | 清除两例中最大影响的那侧 |
clear底层实现的原理是：设置清除浮动以后，浏览器会自动为元素添加一个margin，以使其位置不受其他元素的影响
六、浮动属性引发的高度塌陷问题
我们可以看下面这个案例，父div元素中包含着一个设置为浮动的div子元素，由于子元素设置为浮动，脱离了文档流，且父元素中没有指定高度，所以此时一旦子元素脱离了文档流后，就缺少了支撑起父元素高度的元素。相比于这样的效果，我们更希望即使子元素设置为浮动，但父元素依然可以包裹住子元素（或者说是有着子元素的高度，不至于塌陷）。
<head>
<meta charset="UTF-8">
<title>高度塌陷问题</title>
<style>
#root{
border: solid plum 10px;
}
#box{
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div id="root">
<div id="box"></div>
</div>
</body>
七、解决高度塌陷的几种方式
（一）开启元素的BFC环境
BFC(Block Formatting Context)块级格式化环境
BFC是一个css中的一个隐含的属性，当元素开启BFC后，该元素会变成一个独立的布局区域。可以理解为，此时元素内的后代元素不会再把其他样式传递到外面了。
元素开启BFC后的特点;
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
开启BFC环境的方法
可以通过一些特殊方式来开启元素的BFC
1、设置元素的浮动（不推荐)
2、将元素设置为行内块元素(不推荐)
3、将元素的overflow设置为一个非visible的值
<head>
<meta charset="UTF-8">
<title>BFC解决高度塌陷的问题</title>
<style>
#box1{
border: skyblue solid 10px;
overflow: hidden;
}
#box2{
width: 200px;
height: 200px;
background-color: tomato;
float: left;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
需要注意的是，虽然开启元素的BFC环境可以解决高度塌陷的问题，但是这还不是最完美的解决方案，在某些特殊的环境下还是会有问题。
（二）::after伪类选择器解决高度塌陷问题
我们回顾一下，高度塌陷产生的原因是什么？主要是因为父元素没有设置高度，所以父元素的高度由子元素的高度决定，一旦子元素设置为浮动后脱离了文档流，那么此时父元素就会由于没有子元素的支撑而塌陷。
那么如果我们能够实现，手动在浮动的子元素后面放入一个无内容的块元素，且清除其受到的float影响，那么此时这个块元素就会落在浮动的元素下方，又由于（自身没有设置高度的）父元素的高度由子元素的高度决定，所以此时父元素因为要包裹新增的无内容块元素，也就自然可以包裹浮动的元素了。
<head>
<meta charset="UTF-8">
<title>::after 解决高度塌陷问题</title>
<style>
#root{
border:turquoise solid 10px;
}
#root2{
width: 200px;
height: 200px;
background-color: thistle;
float: left;
}
#root::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="root">
<div id="root2"></div>
</div>
</body>
（三）clearfix样式
所谓的clearfix样式，其实核心就是在第二种解决方式的基础上，对样式做一个进一步的封装，使其既可以解决高度塌陷的问题，还可以解决父子元素外边距重叠的问题。
.clearfix:::before,.clearfix::after{
content: '' ;
display: table;
clear: both;
}
