css清除浮动

father里面有三个son,然后son是浮动的:

       <div id="father">
            <div class="son"></div>
            <div class="son"></div>
            <div class="son"></div>
        </div>

        <style>
            #father{
                border: solid 1px #0077AA;
            }
            .son{
                border: solid 1px #f00;
                width: 100px;
                height: 100px;
                float: left;
            }
        </style>

浮动

1.给父元素加overflow: hidden;

        <style>
            #father{
                border: solid 1px #0077AA;
                overflow: hidden;
            }
            .son{
                border: solid 1px #f00;
                width: 100px;
                height: 100px;
                float: left;
            }
        </style>

父元素加overflow: hidden

2.在子元素的最后再加一个空的块级元素,设置样式clear:both;

3.父元素设置after伪元素:

            #father::after{
                content: '';
                clear: both;
                display: block;
                overflow: hidden;
            }

父元素设置after

4.给父元素设置高度.