清除浮动的几种方式
2018-06-24 01:46:16来源:未知 阅读 ()
不清除浮动会怎样?
(1):背景不能显示
(2):边框不能撑开
(3):margin 设置值不能正确显示
(4):下方内容往上移盖住浮动区域的内容
html代码:
<div class="container"> <div class="fl"></div> <div class="fr"></div> </div> <style> .fl{float:left;} .fr{float:right;} </style>
方式一:
在.container下,最后再加一个div如下:
<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>
方式二:
给父元素.container添加样式:
.container{ overflow: auto; zoom: 1; }
方式三:
伪类清除浮动:after:
.container:after{ content:''; display: block; clear: both; height:0; width:100%; visibility: hidden; } .container{ zoom:1;//为了兼容IE }
方法四:
双伪类清除浮动:
.container:before,.container:after { content: ""; display: block; clear: both; } .container{ zoom: 1; }
方式五:
展现为表格,需设置宽度:
.container{ width:100%; display:table; }
方式六:
展现为内联块状,需设置宽度:
.container{ width:100%; display:inline-block; }
方式七:
超出隐藏,不推荐使用
.container{ overflow:hidden; }
方式八:
给父元素定义高度,不推荐使用
.container{ height:50px; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS z-index的用法
下一篇:css实现未知高度水平垂直居中
- 清除浮动clearfix 2020-04-27
- 如何清除a标签或者span标签之间的默认留白间距 2020-03-19
- 高度塌陷,清除浮动---CSS必备的盒子模型知识! 2020-03-07
- 定位与锚点 2020-03-06
- CSS选择器有哪几种?举例轻松理解CSS选择器 2020-02-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash