您现在的位置:首页 >> 前端 >> 内容

子元素设置浮动影响父元素

时间:2017/9/7 9:30:00 点击:

  核心提示:例:!DOCTYPE htmlhtml lang=zh-CNheadmeta charset=utf-8/stylebody{margin:0;padding:0;}.p0{width:400px;b...

例:

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

此时父元素p0无法包含子元素,解决办法:

1.给父元素设置overflow
 
.p0{overflow: hidden;}
 
2.增加一个子元素,设置clear: both;
 
<p></p>
 
3.给父元素设置float
 
.p0{float:left;}
 
缺陷:需要给父元素设置宽度。
 
4.移动端经常使用的方法
 
给父元素添加类class="clearfix"
 
.clearfix::after,.clearfix::before{
    content: "";
    height:0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

作者:网络 来源:落日夕霞的博客