css浮动问题
浮动的影响
(1)父级背景不能显示
(2)父级边框不能撑开
(3)父级margin 设置值不能正确显示
清楚浮动的几种方法：
1.给父级容器高度；父级容器高度不能为固定的时候，给父级 overflow:hidden
2. 给浮动元素的兄弟元素加属性clear:both
3.给父级 ::after(伪类)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
border:2px solid black;
background-color: indianred;
margin:100px;
height:500px; /*1.在这里给父级容器div一个固定宽度或者overflow:hidden即可*/
}
#div1{
width:150px;
height:150px;
background-color:pink;
float: left;
}
#div::after{ /*3.用伪类::after清除，个人不推荐这种方法*/
content:",";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#div2{
width:150px;
height:150px;
background-color:orange;
float: left;
}
#div3{
width:150px;
height:150px;
background-color:blue;
float:left;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div style="clear:both"></div><!--2.在这里建一个空的div，给个clear:both即可-->
</div>
</body>
</html>
浮动之后的样子，父级的边框只有上边，背景也不显示
清楚浮动之后是下面这样的
浮动的清除就是这些了，希望能对有疑问者有所帮助
持续更新，持续分享交流，共同进步，共同学习
我们下期见