css清除浮动
语法:
选择器 {clear:left/right/both}
left表示不允许左侧有浮动元素;
right表示不允许右侧有浮动元素;
both表示清除两端的浮动影响;
实际工作中几乎只用clear:both;
1.额外标签法:
在浮动标签末尾添加一个空的标签。
例如:
<style>
div li {
list-style: none;
}
.clear {
clear: both;
}
.box {
width: 1200px;
background-color: powderblue;
margin: 0 auto;
border: 1px solid blue;
}
.box2 {
width: 1200px;
background-color: purple;
margin: 0 auto;
}
.charactor1 {
float: left;
background-color: pink;
height: 150px;
width: 400px;
}
.charactor2 {
float: left;
background-color: black;
height: 150px;
width: 400px;
}
</style>
<body>
<div class="box">
<li class="charactor1">1</li>
<li class="charactor2">2</li>
<li class="clear"></li>
</div>
<div class="box2"></div>
</body>
运行结果:
优点:通俗易懂,书写方便;
缺点:添加许多标签,结构混乱;
2.给父级添加overflow:
只需要找到父级标签的类,在类中添加:
overflow:hidden;
即可
<style>
div li {
list-style: none;
}
.box {
overflow: hidden;
width: 1200px;
background-color: powderblue;
margin: 0 auto;
border: 1px solid blue;
}
.box2 {
width: 1200px;
height: 100px;
background-color: purple;
margin: 0 auto;
}
.charactor1 {
float: left;
background-color: pink;
height: 150px;
width: 400px;
}
.charactor2 {
float: left;
background-color: black;
height: 150px;
width: 400px;
}
</style>
<body>
<div class="box">
<li class="charactor1">1</li>
<li class="charactor2">2</li>
</div>
<div class="box2"></div>
</body>
运行结果:
还有两种其他方法:
(1)after伪元素法
(2)双伪元素清除浮动
这两种方法仅限了解接可。