CSS浮动与清除浮动
程序员文章站
2022-03-29 19:59:59
...
CSS浮动与清除浮动
1.CSS浮动
浮动的作用：
1.1 浮动可以解决文字包围图片的问题
1.2 浮动可以解决div之间的间隔问题
1.3 浮动可以向左或者向右进行排版布局
img{
float：left
}
添加浮动前，文字行基线和图片对齐。
添加浮动后，文字包围图片。
添加浮动前，图片之间会有莫名其妙的间隔
添加浮动后，图片进行向左浮动
浮动可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素边缘或者是设置了浮动的其他元素的边缘
2.CSS浮动的高度塌陷问题
当父元素高度设置为0时，子元素浮动脱离文档流，h1标签的内容和子元素处于同一行。
解决方案：
1.设置父元素高度
2.子元素添加div，清除左右浮动
.clear{
clear: both;//元素左右两侧均不允许浮动
}
3.最佳解决方案，伪元素清除浮动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.parent{
width: 400px;
/* height: 300px; */
margin: 0 auto;
background: deeppink;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
/* .clear{
clear: both;
} */
.clear:after{
content: "";
display:block;
clear:both;//元素左右两侧均不允许浮动
}
</style>
<body>
<div class="parent clear">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="clear"></div>
</div>
<h1>Skrrrrrrrr</h1>
</body>
</html>
上一篇： [js]02css基础-清除浮动
下一篇： CSS浮动与清除浮动