CSS clear清除浮动
2022-04-01 本文已影响0人
音乐与咖啡Bean
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 700px;
height: 700px;
border: solid 2px;
}
#one {
width: 100px;
height: 100px;
border: solid 2px;
background-color: gold;
float: left;
}
#two {
width: 300px;
height: 300px;
border: solid 3px blue;
background-color: #bbb;
float: right;
}
#three {
width: 200px;
height: 200px;
border: solid 2px;
background-color: blue;
clear: both;
}
#tow_1 {
width: 50px;
height: 50px;
border: solid 2px;
background-color: black;
float: right;
}
#tow_2 {
width: 80px;
height: 80px;
border: solid 2px;
background-color: red;
clear: both;
}
.text_view {
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="one">1</div>
<div id="two">2
<div id="tow_1">2.1</div>
<div id="tow_2">2.2</div>
</div>
<div id="three">3</div>
<p class="text_view">clear 是为了当前元素不受之前兄弟元素本身(同一个父元素，不包含其子元素等)的浮动的影响</p>
</body>
</html>
image
父级边框塌陷的问题
clear：
right：右侧不允许有浮动元素；
left：左侧不允许有浮动元素；
both：两侧不允许有浮动元素；
none：
解决塌陷问题方案：
方案一：增加父级元素的高度；
father{
border:1px #000 solid;
height:800px;
}
方案二：增加一个空的 div 标签，清除浮动。
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
方案三：在 父级元素中 增加一个 overflow 属性。
overflow:hidden; /* 隐藏超出部分 /
overflow:scroll; / 滚动 */
方案四（推荐）：父类 添加一个伪类:after。
father:after{
content:'';
display:block;
clear:both;
}
