清除浮动

清除浮动

方法一：

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

方法二：

  .parent {
     overflow: hidden;
  }

方法三：

 <div class="parent">
    <!-- <table></table> -->
   <div class="son1">
       我是大儿子
   </div>
      <div class="son2">
       我是二儿子
   </div>
    <div class="clear"></div>
</div>

.clear{
	clear:both;
}

消除子元素margin对父元素的影响

<div class="uncle">我是你叔叔</div>
<div class="parent">
   <!-- <table></table> -->  //方法三：添加一个空的<table></table>
  <div class="son">
     我是儿子
  </div>
</div>

 .uncle {
	width: 100px;
	height: 100px;
	background: lightseagreen
}
.parent {
	width: 200px;
	height: 200px;
	background: lightcoral;
	overflow: hidden;//方法一：父元素添加overflow:hidden
    padding-top:10px; //方法五：为父元素添加padding值
}
.parent:before {  //方法二：添加伪类
	content: '';
	display: table;
}