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

  • 时间:2020-03-28 21:20 编辑: 来源: 阅读:135
  • 扫一扫,手机访问
摘要:在网页制作过程中,为了让二个DIV横排需要设置浮动属性float,但产生了一个问题,当我们在网页制作时设置浮动属性,下面的DIV就会上移到顶部造成网页错位,这时我们就需要对设置浮动属性的DIV添加清除浮动代码。下面是网页制作过程中设置

在网页制作过程中,为了让二个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种写法,在我们自己做网站时可以直接使用。


  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【技术文章|】Java 开发环境配置(2021-01-16 19:16)
【技术文章|java技术】Java简介 主要特性 发展历史(2021-01-16 19:10)
【技术文章|java技术】eclipse项目如何导入myeclipse项目中 如何把eclipse项目导入myeclipse(2020-12-20 22:06)
【技术文章|】如何将MyEclipse项目导入eclipse (2020-12-20 22:00)
【技术文章|java技术】如何用eclipse运行myeclipse做的项目(2020-12-20 21:55)
【技术文章|java技术】怎么分辨java框架(2020-12-17 16:27)
【技术文章|】Editplus批量转换java utf-8 bom源码文件为utf-8编码文件(2020-12-13 20:21)
【技术文章|java技术】java utf-8 bom源码文件为utf-8编码文件(2020-12-13 20:17)
【服务项目|】java程序代写计算机毕业设计代做(2020-10-20 16:54)
【热点|国内】第七次全国人口普查“查人”又“查房”,还可自主填报(2020-10-20 14:49)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 站点地图
CopyRight 2014-2024 学帮网 |粤ICP备18000800号-4