您的位置：首页 > Web前端 > CSS

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

2017-09-05 17:51 323 查看
例：

<!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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航