解决子元素设置浮动影响父元素问题-蒲公英云

解决子元素设置浮动影响父元素问题

灰太狼 2022-06-09 12:10 543阅读 0赞

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<style> body{ margin:0;padding:0;} .div0{ width:400px;background-color:skyblue;} .div2,.div3{ width:100px;height:100px;background-color:red;float:left;} </style>
</head>
<body>
<div class="div0">
    <div class="div2"></div>
    <div class="div3"></div>
</div>
</body>
</html>

此时父元素div0无法包含子元素，解决办法：

1.给父元素设置overflow
.div0{overflow: hidden;}
2.增加一个子元素，设置clear: both;
<div style="clear:both"></div>
3.给父元素设置float
.div0{
   float:left;}
缺陷：需要给父元素设置宽度。
4.移动端经常使用的方法
给父元素添加类class="clearfix"
.clearfix::after,.clearfix::before{
    content: "";
    height:0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
/*伪元素before相当于在当前元素的第一个子元素前插入一个元素，after则是在之后插入一个元素*/
//注：为区分伪类和伪元素css3提出伪元素使用::,因此为了兼容IE8及以下，应使用:after和:before。