css清除浮动影响

初始代码环境如下:



  
1
2
css清除浮动影响_第1张图片
image.png

方法1:(并算不上清除浮动)
在父元素中计算并设定子元素所占高度

    .parent{
        width: 300px;
        height: 100px;
        border: 1px solid black;
    }
css清除浮动影响_第2张图片
微信截图_20170804155539.png

方法2:
利用添加子元素clear:both设定

.clear{
  clear:both;
}

2
css清除浮动影响_第3张图片
微信截图_20170804155819.png

方法3:
利用父元素中overflow:hidden

    .parent{
        width: 300px;
        overflow: hidden;
        border: 1px solid black;
    }
css清除浮动影响_第4张图片
微信截图_20170804160122.png

方法4:(与方法2思想一致)
利用伪类选择器构造一个型为div

    .parent:after{
        display: block;
        content:"";
        clear: both;
    }
css清除浮动影响_第5张图片
微信截图_20170804160821.png

你可能感兴趣的:(css清除浮动影响)