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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/GreyBearChao/article/details/77853804

例:

<!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。
展开阅读全文

没有更多推荐了,返回首页