清除浮动

场景:当父盒子高度没有设置,且子元素设置了浮动的时候,会影响其后面文档流的元素

结构

浮动

 .son1 {
        ...
       float: left;
     }
 ​
     .son2 {
       ...
       float: right;
     }
 ​
     .father {
       width: 500px;
       border: 2px solid black;
     }

son3被影响

1.1 方法

1.标签法

在最后浮动的元素后加 clear: both;

2.父级添加 overflow:hidden

3.父级添加 after

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

4.父级添加 双伪元素

 .clear::after,
     .clear::before {
       content: '';
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
     }

即在方法三中假如before,闭合清除浮动

1.2 效果