清楚浮动的方法几种常用方法

这个问题其实早在大二、大三的时候我就做过记录，但是恨当时没有记录在博客，现在再重新记一下把～～

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

一、加::after

给父元素加伪元素::after,并加上对应样式：

.outer{
  content: "";
  display: block;
  clear: both; 
}

二、加div

这里的div和上面的:after作用是一样的,相当于手动在HTML上加一个::after

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

.clear{
  clear:both;
}

三、给父元素加ooverflow:hidden

直接给父元素加overflow:hidden就ok了

四、给父元素加height

直接给父元素加上固定的高度，虽然简单，但是高度被定死了