前端入门篇（二十六）浮动float与清除clear
float功能
标准流中，块级元素是独占一行的，float可使一行中放进多个块级元素，一行放不下，就到下一行没有添加float浮动
css文件：div {
width: 300px;
height: 300px;
border: 1px solid black;
}
html文件：
<body>
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
<div class="div6">div6div>
body>
效果：
添加整体浮动
css文件：div {
width: 300px;
height: 300px;
border: 1px solid black;
float: left;
}
html文件：
<body>
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
<div class="div6">div6div>
body>
效果：
添加局部浮动
css文件：div {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: greenyellow;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
html文件不变
效果：div1浮动在上方，覆盖在div2上，并且设置浮动之后，下方的文字会绕着浮动，因此，div2上的字没有被盖住
清除浮动：clear
将设置浮动的元素打包成一个整体，插回标准流，独占一行，并且不会影响后面的元素再添加浮动在下一个块元素中清除浮动
css文件：注意是在div3清除浮动div {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: greenyellow;
}
.div1,.div2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.div3 {
clear: both;
}
html文件不变
效果：div1和div2为一行，div3另起一行，跟在后面
css文件：在上面的基础上再加一个右浮动
.div4 {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
}
.div5 {
clear: both;
}
html文件不变
效果：div5没有清除浮动时，div5紧跟div3，清除浮动之后，会为div4让出位置，即div4独占一行
利用伪元素清除浮动
伪元素指的是在我们写元素时，会隐形地在标签里面添加before和after标签，包裹内容 <div>
div>
我们可以使用伪元素的after来清除浮动
1.先将伪元素转变为真元素（添加内容content）
2.将after这个行元素转为块元素（独占一行，display）
3.清除浮动
css文件：
div {
border: 1px solid black;
background-color: greenyellow;
}
.div1,.div2,.div3,.div4,.div5,.div6{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.container::after {
content: "";
display: block;
clear: both;
}
html文件：
<body>
<div class="container">
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
<div class="div6">div6div>
div>
body>
效果：
用伪元素清除浮动，并解决margin重叠问题
margin重叠问题
如果div没有加边框，也没有加文字内容，即div没有被封起来或填充时，会出现margin重叠的问题，如下： css文件：div {
/* border: 1px solid black; */
background-color: greenyellow;
margin: 20px;
}
.div1 {
width: 100px;
height: 100px;
background-color: tomato;
}
.div2,.div3,.div4,.div5,.div6{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
html文件：
<body>
<div class="container">
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
<div class="div6">div6div>
div>
body>
效果：div1本该与黄绿色的父级div有20px的margin，但此时父级div——"container"与body之间的边框 和 div1与container之间的间隔合在一起
解决margin重叠问题
css文件：.container::before {
content:"";
display:table;
}
效果：与container之间的margin已显示
将清除浮动与margin重叠问题一并解决
css文件：.container::before,.container::after {
content:"";
display:table;
}
.container::after {
clear: both;
}
效果：
