display和浮动 及父级边框塌陷问题

display和浮动
display：
        inline;行内元素
        block;块元素
        inline-block;是块元素，但是可以内联在一行。
        none;消失
     float：浮动，可以左右浮动 float：left左浮动。float：right右浮动
     clear：both：清楚浮动

 clear：left;左侧不允许有浮动元素
         clear：left;右侧不允许有浮动元素
         clear：both;两侧不允许有浮动元素
         clear：none;没有东西，什么都没有

 

 inline-block;是块元素，但是可以内联在一行。

 

 父级边框塌陷问题：

1、增加父级元素的高度

（注：简单，元素假设没有了固定的高度，就回被限制）

 

 2、增加一个空的div标签，清除浮动

（注：简单，代码中尽量避免使用空的div）

HTML和CSS 都写到末尾处

 

3、在父级元素中增加overflow：hidden；

overflow: scroll;滚动条

（注：高度根据内容元素不会被剪切掉，使用简单，但下拉的场景避免使用）

 

 

 4、父类添加一个伪类：after

（注：可以避免一个空的div的情况，写法稍微复杂，但是没有副作用，推荐使用）