Python全系列 教程
3567个小节阅读:5931.7k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,
xxxxxxxxxx
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
xxxxxxxxxx
.container{
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
xxxxxxxxxx
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>
xxxxxxxxxx
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
}
当父元素出现塌陷的时候,对布局是不利的,所以我们必须清除副作用
解决方案有很多种
如果父元素高度塌陷,可以给父元素设置高度,撑开元素本身大小
xxxxxxxxxx
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
xxxxxxxxxx
.container{
height: 300px;
width: 350px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
如果有父级塌陷,并且同级元素也收到了影响,可以使用overflow
清除浮动
这种情况下,父布局不能设置高度
父级标签的样式里面加: overflow:hidden;clear: both;
xxxxxxxxxx
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="nav"></div>
xxxxxxxxxx
.container{
width: 350px;
border: 1px solid red;
overflow: hidden;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
}
如果有父级塌陷,并且同级元素也收到了影响,还可以使用伪对象方式处理
为父标签添加伪类after
,设置空的内容,并且使用clear:both
;
这种情况下,父布局不能设置高度
xxxxxxxxxx
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="nav"></div>
xxxxxxxxxx
.container {
width: 350px;
border: 1px solid red;
}
.container::after {
content: "";
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
}
实时效果反馈
1.下列关于清除浮动的方法,描述错误的是:
A 如果父元素塌陷,可以设置父元素高度消除浮动的副作用
B 如果后续元素受到浮动影响,可以使用clear: both;
清除
C 如果父元素塌陷,可以使用伪对象方式清除
D 如果父元素塌陷同时影响后续元素,可以使用float
清除
答案
1=>D