WEB前端网页设计 HTML CSS 网页设计参数 - 【高度坍塌】

1

清除浮动

#给父元素设置高度

2

给父元素设置overflow：hidden；

原理是利用overflow：hidden;创建了一个新的bfc，在新的bfc里面，自动高度会计算浮动元素的高度，于是有了这种解决高度坍塌的方法

缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

3

最

好

用

给父元素设置伪类元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开；

右侧示例如是：

berfore表示在.A的内容前面添加其他内容

after     表示在.A的内容后面添加其他内容

 .A::after{

    content: "";              #添加内容

    display: block;          #转换元素类型为块元素

    clear: both;              #清除两侧浮动

   height：0； overflow：hidden；     #内容溢出则隐藏

   visibility：hidden；    #隐藏属性

}

4

给父元素添加display：table；属性

让父元素转化为元素类型跟表格的特性一样

弊端：会更改父元素的类型

5

边框属性

border-style

none无、solid单实线、dashed虚实线、dotted点线、double双实线

边框粗细

border-width

边框颜色

border-color