CSS3 - 清除浮动
一、 目的
通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法。 本文也会同步到我的个人网站。
二、 内容简介
1、 引入,还原浮动本来的意义
2、 说明,实际开发中常用浮动来做什么
3、 提问,为什么要清除浮动
4、 回答,如何清除浮动以及常用的几种方法
5、 结论,得出本文认为最好用的方法
复制代码
三、 正文
1、 浮动本来的意义 浮动的意义原本仅是用来让文字环绕在图片周围而已。
通过上图可以看到,设置图片左浮动可以将图片从正常文档流中抽取出来,后面的元素会忽略浮动元素原来的位置,所以可以看到以块元素显示的span标签插入到了图片下面,但是,我们发现文字却不会嵌入到图片下面,因为这就是浮动最纯粹的意义--让文字环绕在图片周围(关于为什么文字不会插入浮动元素下面在网上也有一些讨论,大家可以去搜索一下,本文在此就不做更详细的解释了)。
PS: 如果想让文字也插入到浮动元素下面,可以通过设置绝对定位来实现。
// html代码<section><div class="origin1">![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<span>想象我是一大段文字</span></div><div class="float1">![img](http://upload-images.jianshu.io/upload_images/2944582-8c9f0eba7dce2e55.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<span>想象我是一大段文字</span> </div></section>
复制代码
// css代码
.origin1 span {display: block;width: 250px;height: 120px;background-color: #78f182;
}.float1 img{float: left;
}.float1 span {display: block;width: 250px;height: 120px;background-color: #78f182;
}
复制代码
2、 浮动经常被用来做什么 因为浮动可以让块状元素并排显示,所以经常用来做导航栏,内容分块栏等布局。
// html代码<section class="section2"><ul><li><a href="#">产品中心</a></li><li><a href="#">服务中心</a></li><li><a href="#">新闻中心</a></li><li><a href="#">客户见证</a></li><li><a href="#">招贤纳士</a></li></ul></section>
复制代码
// css代码
.section2 li{list-style: none;float: left;padding: 20px;height: 20px;background-color: #1249c3;border-right: 1px solid #a0a2a2;
}.section2 li a {color: #fff;
}
复制代码
3、 为什么要清除浮动
通过上图可以看到,当三个板块左浮动以后,因为它们脱离了正常文档流,所以它们的父元素ul在不设置高度的情况下,无法被子元素撑开(能够看到背景色是因为我设置了ul的padding为10px),所以当你在后边新增元素的时候,自然会排在ul后边,也就是插入到了3个浮动的板块下面。 这并不是我们想要的,这就是要清除浮动的原因。
// html代码<ul><li><p>互动板块 li</p></li><li><p>学习板块 li</p></li><li><p>留言板块 li</p></li>我是本应该包裹在3个板块外面的父元素ul</ul><div class="new">我是跟在ul后面的新div</div>
复制代码
// css代码
ul {padding: 20px;background-color: #b7db05;
}ul li {width: 200px;height: 200px;background-color: #e3e3e3;margin-right: 20px;text-align: center;float: left;
}.new {height: 50px;background-color: #1be751;
}
复制代码
4、 如何清除浮动 (1) 在最后一个浮动的 li 元素后边新增一个空的块状元素div,并设置clear:both以清除所有浮动。
// html代码<ul><li><p>互动板块 li</p></li><li><p>学习板块 li</p></li><li><p>留言板块 li</p></li>我是本应该包裹在3个板块外面的父元素ul<div style="clear:both;"></div> // 新增代码</ul><div class="new">我是跟在ul后面的新div</div>
复制代码
效果: ul后边的div元素确实可以在浮动元素下边排列,并且设置margin、padding等也是针对浮动元素的下边框。 缺点: 多出了一个冗余标签,并没有任何结构意义。
(2) 设置父元素ul的overflow: hidden或者overflow: auto。
// css代码
ul {padding: 20px;background-color: #e7a5b8;overflow: hidden;
}
复制代码
效果: 对于ul后面的元素来说,它们可以在浮动元素下边依次排列了。 缺点: 采用这种overflow方法时可能会对采用定位position的元素产生影响,因为在ul的范围内,超出的部分将会被隐藏,所以如果定位元素处在ul超出的范围内,那么会被隐藏。
(3) 采用伪类方法,在最后一个浮动元素的后边,添加clear:both。
// css代码
ul:after {content: "";clear: both;display: block;
}
复制代码
效果: 很好的清除了浮动带来的影响,并且没有附加作用,也没有新增无语义的标签。 缺点: 暂时还没发现。
####四、 结论 综上所述,本文认为最好用的方法是采用after伪类来清除浮动带来的影响,欢迎大家前来讨论。
CSS3 - 清除浮动相关推荐
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)
说明 源代码 1.1 CSS属性书写顺序(重点) 建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overf ...
- css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动 这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1.高度塌陷 举个例子我们看一下. 我们在 ...
- Bootstrap——制作个人简历网页、工具类【边框(添加、删除、颜色、圆角)、清除浮动、颜色(文本、链接、背景)、display属性、浮动、定位、文本对齐】
制作个人简历网页 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
- HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如 <div style="clear:both;"></di ...
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- html清除浮动有几种方法,HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如 实例:清除容器中子元素的浮动,让父元素塌陷的高度恢复. CSS代码: .content{ wid ...
- html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...
- Web前端CSS清除浮动的5种方法
在移动端清除浮动布局,常用的5种方法: 使用清除浮动的类: 使用overflow属性: 使用 flex 布局: 使用grid 布局: 使用 table 布局. 根据实际情况选择适合的方法,需要注意兼容 ...
最新文章
- UI培训分享:导航栏UI设计规范及注意事项有哪些?
- 数据告诉你,胡歌的微世界
- “为啥Kaggle奖金那么少?”一场25000美元的比赛,却因“抠门”引发激烈讨论...
- rocketmq之producer解析
- unity2D平面摄像机滑动缩放
- Spring MVC中Session的正确用法之我见02
- 循环往list中add对象却总是add的是一个对象
- 程序员快来看!经典代码替你省去多少时间?
- 从一个hibernate配置文件中了解到的东西
- Keil5.15版本号
- 通过自研数据库画像工具支持“去O”数据库评估
- Java白盒测试工具
- imagej得到灰度图数据_用ImageJ处理空间成像数据
- 谈谈机器视觉的那点事儿!
- PyCharm双击打不开怎么办?
- 我的生活所感悟出的杂句
- iPhone如何开启头部追踪功能 iPhone头部追踪功能使用方法
- Linux系统磁盘空间不足解决办法
- openCV色彩空间转换
- 深入浅出—Redux-saga源码
热门文章
- python语法错误怎么办_Python中“函数外返回”语法错误的原因?
- python里面如何安装nltk_nltk的安装和简单使用
- unity3d 不规则外发光描边_Shader案例之内发光和边缘泛光效果
- java做一个客房管理系统定制_管理皮孩子很难?来,教你一个java设计简单的学生管理系统...
- ora-01740: 标识符中缺失双引号_sql语句中单引号的使用
- mysql 数据趋势,2019年8月全球数据库流行度排行--oracle、mysql增长趋势明显
- 地砖中间高四边低_地砖上墙到底好不好?幸好我家没这么做否则全毁了!
- ajax成功或失败的原因,实际上成功后,AJAX发布请求报告失败
- android多条件查询数据,Android GreenDao 条件查询问题
- php %3f,PHP