CSS浮动布局
2021-01-26 本文已影响0人
白羽之鹰
说浮动布局，就得先知道文档流，文档流有正常文档流、脱离文档流。
- 正常文档流：将一个页面从上到下分为一行一行，块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。使元素不按正常文档流就是脱离文档流。
例如：
<body>
<div class="div00">
<div class="div01"></div>
<div class="div02"></div>
<span></span><span></span>
<div class="div03"></div>
<div class="div04"></div>
</div>
</body>
对应的正常文档流如图，
image.png
改变正常文档流的方法：浮动和定位。
1.使用浮动脱离文档流
例如01：
html:
<div class="div00">
<div class="div01">div01块</div>
<div class="div02">div02块</div>
<div class="div03">div03块</div>
<div class="div04">div04块</div>
</div>
scss (用了sass预处理器):
.div00{
width: 200px;
//注意这里目前未设置父元素的高度
background-color: chartreuse;
div{
height: 50px;
}
.div01{
float: left;
background-color: aqua;
}
.div02{
background-color: bisque;
}
.div03{
background-color: blueviolet;
}
.div04{
background-color: blue;
}
}
结果：
image.png
分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。
例如02：
只设置后面两个div左浮动
结果：
image.png
例如03：
全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0
image.png
例如04：
父元素宽度不能容纳浮动的元素时，就会换到下一行。
image.png
2.浮动带来的影响
- 对设置了浮动的元素自身来讲，无论是什么元素这个元素都会变成block元素
- 浮动元素的高度大于父元素的高度，或者父元素没有设置高度，那么会出现父元素高度塌陷的问题，如例03
如何解决呢？
有clear、overflow:hidden,::after三种，这里推荐第三种伪类的方法
.div00{
*zoom: 1;
}
.div00::after{
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
效果如图：对比例3，父元素高度塌陷问题解决
image.png
- 对兄弟元素的影响见例01和例03
- 父元素是浮动元素，并且他的子元素也是浮动元素，那么父元素会自适应的包含子元素，也是解决父元素高度塌陷的方法之一
此外，浮动可以用来实现两列布局或多列布局
例如：
html:
<body>
<div class="div00">
<div class="div01">div01块</div>
<div class="div02">div02块</div>
</div>
</body>
scss:
.div00{
*zoom: 1;
}
.div00::after{
clear: both;
content: '';
display: block;
height: 0;
visibility: hidden;
}
.div00{
width: 100%;
background-color: white;
div{
height: 5000px;
}
.div01{
margin-left: 10%;
width: 40%;
float: left;
background-color: aqua;
}
.div02{
margin-right: 10%;
width: 40%;
float: right;
background-color: bisque;
}
}
结果：
image.png
