web前端|css教程
CSS，浮动清除
web前端-css教程
浮动
phpcms v9网站源码,ubuntu网页登录界面,tomcat怎么安装不上,爬虫标准格式,php7 iis配置,seo亮剑lzw
1. 什么是浮动
当元素的float属性不为none时就产生了浮动。
仓储管理asp源码,ubuntu网卡名查询,小爬虫旅行记,php minifier,楚雄seo新闻lzw
float
delphi 三层源码,vscode启动调试报错,ubuntu深度,tomcat线程数查看,sqlite3数据库下载,ai网页设计制作,iis7 asp 数据库连接错误,php服务器环境搭建,百度导航中插件功能,前端3大框架选型命令,python爬虫实验报告,php try,企业seo外包,springboot普及,label标签的默认值,企业网站后台模版,网页留言 代码,帝国 模板 分享,织梦后台登陆地址,纯css3 页面切换,基于java的学生信息管理系统,有限差分法程序lzw
.float { float: left; width: 100px; height: 100px; background-color: #ddd;}
2. 浮动的影响
浮动会使元素脱离文档流，具体表现为：
父元素高度塌陷，即不会包含浮动元素。
比如上面的代码就会表现为
父元素高度塌陷
文本环绕。
文本环绕效果
可以注意到这里.normal元素的宽度覆盖了.float元素，但是.float元素下是没有文本的，也就是说文本被“挤”出来了，这是因为它虽然会脱离文档流，但是不会脱离文本流。这个效果也是float属性的本意。其代码如下：
float
正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素
body { background-color: #ccc;}.float { float: left; width: 100px; height: 100px; background-color: #ddd;}.normal { background-color: #fff;}
浮动元素的外边距不会合并。
关于外边距合并的相关内容可以戳这里。
元素一旦浮动便会变成行内块元素，即display: inline-block。
3. 浮动的应用
上面提到的文本环绕。
写一个三列布局，左右固定宽度，中间自适应。
left
right
自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
body { background-color: #ccc;}.float { float: left; width: 100px; height: 100px; background-color: #ddd;}.left { float: left;}.right { float: right;}.mid { height: 100px; background-color: #fff; margin: 200px; /*故意加上了上下 margin 值*/}
这里我故意加上了上了margin值，可以看到效果：
三列布局
body也随.mid的margin往下掉了，这点可以用前面介绍的外边距合并来解释。
ps：我第一次自己写这个三列布局的时候，html 是这样写的
left
自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
right
如上把中间自适应的元素写在中间，其实这样比较符合逻辑，但是如果这样写是行不通的，右边的元素会掉下来，因为.mid元素是块级元素，会占满整行，.left不会掉下来是因为它本来就是脱离文文档流的浮动元素。
清除浮动
在子元素上清除
这里我只写不会产生无意义标签的方法。
浮动元素后面若有兄弟元素，则可以在给它的兄弟元素加上clear属性。
如文本环绕那一部分代码，给.normal加上clear:left或者clear:both。clear的具体用法这里不做过多赘述。
给要清除浮动的元素加上伪类或者伪元素。
.float::after { content: \; display: block; visiability: hidden; height: 0; clear: both;}
关于 ::after 的使用可以看 MDN 的文档。
在父元素上清除，即BFC
BFC（Block Formatting Context），即块级格式上下文，它的官方解释是：
总结来说它要满足下列条件之一：
float不为none
position不为static或relative
display为table-cell、table-caption、inline-block、flex、inline-flex
overflow不为visible
只要给父元素加上以上任意一个属性满足条件，也就是给父元素加上 BFC 就能清除子元素的浮动。
