清除浮动(带来的影响) clear与margin重叠

Posted qianphong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动(带来的影响) clear与margin重叠相关的知识,希望对你有一定的参考价值。

  • 【CSS】【清除浮动(带来的影响) clear与margin重叠】

  • 1.用clear清除浮动(在浮动元素的底加入div且设置clear:both;),会发生margin重叠显现

  • 2.用BFC清除浮动(在浮动元素的父元素上加入overflow: hidden;),则会把整个元素包起来,从而不会发生margin重叠现象

  (PS:只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。)

  第一个是使用了"clear:both"但是它会与margin重叠,则margin-botttom无法发挥作用;在父级DIV加上边框 margin-botttom可以发挥作用

  第二个是使用了“overflow:hidden”使得元素BFC化,包裹好了,不影响margin-bottom发挥作用

以上是关于清除浮动(带来的影响) clear与margin重叠的主要内容,如果未能解决你的问题,请参考以下文章

两种好用的清除浮动的小技巧(clearfix hack)

浮动元素的清除

web

float的影响及清除float

2017-6-6浮动的使用

css的浮动以及如何清除浮动