css 浮动 以及父元素的塌陷

浮动

 

 

// left 在左侧不允许浮动元素

 

 

//right 在右侧不允许浮动元素

 

// none 默认值。允许浮动元素出现在两侧

 

 

// overflow:visible  默认值 内容不会修剪 还会在盒子之外

 

 // overflow:hidden   内容会被修剪，其余内容是不可见的

 

 

 

  // overflow:scroll   内容会被修剪，其余内容是会以滚动条便于查看 【横向和纵向 都会展示滚动条】

 

 // overflow:auto   内容会被修剪，其余内容是会以滚动条便于查看 【纵向 没有横向】

清楚浮动，防止父元素塌陷的四种方法

 1、浮动元素后面加空div   

               简单，空div会造成HTML代码冗余

  2、设置父元素的高度

                简单，元素固定高会降低扩展性

 3、父级添加overflow属性

               简单，下拉列表框的场景不能用

 4、父级添加伪类after

             写法比上面稍微复杂一点，但是没有副作用，推荐使用