CSS-浮动与父级边框塌陷问题

浮动

块级元素:独占一行

h1~h6  p  div  列表...

行内元素:不独占一行

span a img strong...

行内元素可以被包含中块级元素中。

父级边框塌陷问题

解决方案:
1.增加父级元素的高度

#father{
      border:1px #000 soild;
      height:800px;
}

2.增加一个空的div标签,清除浮动

<div class="clear"></div>

.clear{
      clear:both;
      margin:0;
      padding:0;
}

3.overflow

在父级元素中增加一个 overflow: hidden;

4.父类添加一个伪类:after

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

小结:
1.浮动元素后面增加空div
简单,代码中尽量避免空div
2.设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
3.overflow
简单,下拉的一些场景避免使用
4.父类添加一个伪类:after(推荐)

上一篇:swagger2整合并不是那么随便


下一篇:swagger2注解