零基础建站培训教程介绍

当前位置:

网页制作设置CSS清除浮动代码方法

在网页制作过程中,为了让二个DIV横排需要设置浮动属性float,但产生了一个问题,当我们在网页制作时设置浮动属性,下面的DIV就会上移到顶部造成网页错位,这时我们就需要对设置浮动属性的DIV添加清除浮动代码。

网页制作设置清除浮动代码

下面是网页制作过程中设置清除浮动代码的四种写法:

方法一:给父级元素添加声明:overflow:hidden;。


 .wrap{ border:3px solid #000;overflow:hidden;}
.box01{ width:500px; height:500px; background:#F00; float:left;}
.box02{ width:500px; height:500px; background:#09F; float:left;}

方法二:给父级元素添加高度:height 。


.wrap{ border:3px solid #000;height:300px;}

方法三:在浮动元素下方添加空div,并声明:{clear:both;height:0;overflow:hidden;}


.wrap{ border:3px solid #000;}
.box01{ width:500px; height:500px; background:#F00; float:left;}
.box02{ width:500px; height:500px; background:#09F; float:left;}
.clear{clear:both; height:0; overflow:hidden;}

方法四:万能清除浮动法


.wrap{ border:3px solid #000;}
.box01{ width:500px; height:500px; background:#F00; float:left;}
.box02{ width:500px; height:500px; background:#09F; float:left;}
.clear:after{content:”.”; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; }

以上就是网页制作过程中清除浮动代码的4种写法,在我们自己做网站时可以直接使用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学习建网站请选择学做网站论坛零基础建站课程