CSS基础-清除浮动
2017-07-18 16:55
666 查看
清除浮动
盒子高度问题
在标准流中内容的高度可以撑起盒子的高度<style> div{ background-color: red; } p{ width: 200px; height: 100px; background-color: blue; } </style> <div> <p></p> </div>
在浮动流中浮动元素内容的高不可以撑起盒子的高
<style> div{ background-color: red; } p{ float: left; width: 200px; height: 100px; background-color: blue; } </style> <div> <p></p> </div>
清除浮动方式一
给前面的父盒子添加高度示例代码:
<style> { margin: 0; padding: 0; } .box1{ background-color: red; /这里*/ height: 50px; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> 大娃 二娃 三娃 </ul> </div> <div class="box2"> <ul class="ul02"> 李南江 极客江南 江哥 </ul> </div>
添加高度前:
添加高度后
注意点:
在企业开发中能不写高度就不写高度, 所以这种方式
不常用
清除浮动方式二
利用clear:both;属性清除前面浮动元素对我的影响
示例代码:html
<style> { margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /这里/ clear: both; /margin无效/ margin-top: 30px; } ul{ list-style: none 4000 ; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> 大娃 二娃 三娃 </ul> </div> <div class="box2"> <ul class="ul02"> 李南江 极客江南 江哥 </ul> </div>
添加
clear: both;前:
添加
clear: both;后
注意点:
使用clear:both之后margin属性会失效, 所以
不常用
清除浮动方式三
在两个有浮动子元素的盒子之间添加一个额外的块级元素示例代码:html
<style> { margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /这里/ .wall{ clear: both; } .h20{ /利用额外块级元素实现margin/ height: 20px; background-color: deepskyblue; } </style> <div class="box1"> <ul class="ul01"> 大娃 二娃 三娃 </ul> </div> <!--这里--> <div class="wall h20"></div> <div class="box2"> <ul class="ul02"> 李南江 极客江南 江哥 </ul> </div>
添加额外块级元素前
添加额外块级元素后
注意点
在外墙法中可以通过设置额外标签的高度来实现margin效果
搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以
不常用
清除浮动方式四
在前面一个盒子的最后添加一个额外的块级元素示例代码html
<style> { margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /margin有效/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } /这里*/ .wall{ clear: both; } </style> <div class="box1"> <ul class="ul01"> 大娃 二娃 三娃 </ul> <!--这里--> <div class="wall"></div> </div> <div class="box2"> <ul class="ul02"> 李南江 极客江南 江哥 </ul> </div>
添加额外块级元素前
添加额外块级元素后
注意点:
内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
和内墙法一样需要添加很多无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦
清除浮动方式五
什么是overflow:hidden?overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码html
.test{ width: 100px; height: 100px; border: 1px solid #000; background-color: red; overflow: hidden; } <div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
添加overflow:hidden前
添加overflow:hidden后
如何利用overflow:hidden;清除浮动
给前面一个盒子添加overflow:hidden属性
示例代码html
<style> { margin: 0; padding: 0; } .box1{ background-color: red; /这里/ overflow: hidden; zoom:1; } .box2{ background-color: purple; /margin有效/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } ul li{ float: left; } </style> <div class="box1"> <ul class="ul01"> 大娃 二娃 三娃 </ul> </div> <div class="box2"> <ul class="ul02"> 李南江 极客江南 江哥 </ul> </div>
添加
overflow:hidden;前
添加
overflow:hidden;后
注意点:
由于
overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
IE8以前不支持利用
overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别
这个是hack写法,用来识别不同版本的IE浏览器
_后面的属性只有IE6能识别
*后面的属性 IE6 IE7能识别
清除浮动方式六
给前面的盒子添加伪元素来清除浮动示例代码 html
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*这里*/ .clearfix:after { /*生成内容作为最后一个元素*/ content: ""; /*使生成的元素以块级元素显示,占满剩余空间*/ display: block; /*避免生成内容破坏原有布局的高度*/ height: 0; /*使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互*/ visibility: hidden; /*重点是这一句*/ clear: both; } .clearfix { /*用于兼容IE, 触发IE hasLayout*/ *zoom:1; } </style> <div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>极客江南</li> <li>江哥</li> </ul> </div>
添加伪元素前
添加伪元素后
注意点:
本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性 CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西 清除浮动方式七
给前面的盒子添加双伪元素来清除浮动
示例代码
<style> *{ margin: 0; padding: 0; } .box1{ background-color: red; } .box2{ background-color: purple; /*margin有效*/ margin-top: 20px; } ul{ list-style: none; } .ul01 li{ background-color: blue; } .ul02 li{ background-color: green; } li{ float: left; } /*这里*/ .cf:before,.cf:after { content:""; display:table; /*重点是这一句*/ clear:both; } .cf { zoom:1; } </style> <div class="box1 clearfix"> <ul class="ul01"> <li>大娃</li> <li>二娃</li> <li>三娃</li> </ul> </div> <div class="box2"> <ul class="ul02"> <li>李南江</li> <li>极客江南</li> <li>江哥</li> </ul> </div>
添加双伪元素前
添加双伪元素后
注意点:
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白 支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动; 不支持 BFC的浏览器 (IE5-7),通过触发 hasLayout 闭合浮动。
相关文章推荐
- DIV+CSS基础教程:清除浮动
- H5 CSS基础实战二:清除浮动的演练
- css基础学习之清除浮动
- CSS基础之清除浮动
- css基础学习之清除浮动
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- CSS基础(一)清除浮动的几种方法
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- CSS基础-清除浮动 16
- CSS基础-5 浮动,margin的bug,清除浮动
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- [js]02css基础-清除浮动
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- CSS基础(三)--清除浮动的影响
- 清除浮动的几种方式--css基础
- div+css之清除浮动
- CSS清除浮动_清除float浮动
- CSS垂直外边距合并和CSS清除浮动