css消除波动的几种方式和示例

日期:2020-12-12 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

1、【.clr{clear:both;}】,设定了clear特性的元素,其上边框会紧贴着波动元素的margin-bottom界限部位3D渲染,忽视其margin-top设定。

拷贝编码
编码以下:

.divcss5{ width:400px;border:1px solid #F00;background:#FF0}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}
.clear{ clear:both}

2、空标识清波动:【.clr{clear:both;height:0;overflow:hidden;}】,不强烈推荐。

3、伪类after清波动:【.clr:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。

4、应用【display:table】。

5、应用overflow除visible,相近于激起haslayout。

6、应用波动父元素清波动。

拷贝编码
编码以下:

.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}