HTML5教程-CSS基础-清除浮动-李南江
来源:互联网 发布:35互联域名管理平台 编辑:程序博客网 时间:2024/04/29 11:43
配套视频下载地址
清除浮动
盒子高度问题
- 在标准流中内容的高度可以撑起盒子的高度
<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>
清除浮动方式一
给前面的父盒子添加高度
示例代码:
```html<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>
- 添加高度前: - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加高度后 - ![](http://upload-images.jianshu.io/upload_images/647982-fcb8f6fa15c6be76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 注意点: - 在企业开发中能不写高度就不写高度, 所以这种方式`不常用`###清除浮动方式二- 利用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;
}
.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;前: - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加clear: both;后 - ![](http://upload-images.jianshu.io/upload_images/647982-7b618617223102be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 注意点: - 使用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>
- 添加额外块级元素前 - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加额外块级元素后 - ![](http://upload-images.jianshu.io/upload_images/647982-15566323325c738d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 注意点 - 在外墙法中可以通过设置额外标签的高度来实现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>
- 添加额外块级元素前 - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加额外块级元素后 - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 注意点: - 内墙法会自动撑起盒子的高度, 所以可以直接设置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;前 - ![](http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 添加overflow:hidden;后 - ![](http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 注意点: - 由于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 闭合浮动。
原文链接:http://www.jianshu.com/p/3c3bfcc37de6
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
- HTML5教程-CSS基础-清除浮动-李南江
- 李南江HTML5教程学习心得
- 【分享】李南江HTML5教程
- HTML5-基础标签-李南江
- CSS基础-清除浮动
- CSS基础清除浮动
- HTML5基础知识-李南江
- 认识HTML5-李南江
- CSS基础-清除浮动 16
- HTML5-列表标签-李南江
- html5和css篇有关浮动以及如何清除浮动
- CSS教程:清除浮动方法大全
- CSS-浮动&清除浮动
- css基础学习之清除浮动
- [js]02css基础-清除浮动
- CSS基础(三)--清除浮动的影响
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- CSS基础-5 浮动,margin的bug,清除浮动
- 《Objective-C 高级编程》读书笔记之 ARC
- IBM老机器的引导盘版本对应
- 1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛
- 1的个数
- Apache Tiles的基本使用
- HTML5教程-CSS基础-清除浮动-李南江
- 关于ORACLE游标的问题(ORA-01000: maximum open cursors exceeded)
- [已解决]android的textview 里面的text 怎么也不到中间的位置,这个时候需要设置android:includeFontPadding="false"
- ActiveMQ应用详解
- 《Objective-C 高级编程》读书笔记之 Blocks
- 网易视频云:分布式视频处理集群中的作业调度
- APP安全之代码混淆防止反编译查看真实的头文件
- 十分钟解决爬虫问题!超轻量级反爬虫方案
- 哈尔滨理工大学软件学院OJ 1419: 最大的XⅡ