文章の目录

1、为什么需要浮动了
2、什么是浮动了
3、浮动有什么用了
4、浮动的基本语法
- 4.1、属性值的取值
- 4.2、浮动口诀之浮
- 4.3、浮动口诀之漏
- 4.4、浮动口诀之特
5、浮动（float）的应用
- 浮动和标准流的父盒子搭配
6、浮动元素与父盒子的关系
7、浮动元素与兄弟盒子的关系
8、清除浮动
- 8.1、为什么要清除浮动
- 8.2、清除浮动本质
- 8.3、清除浮动的方法
- - 8.3.1、额外标签法(隔墙法)
  - 8.3.2、父级添加overflow属性方法
  - 8.3.3、使用after伪元素清除浮动
  - 8.3.4、使用双伪元素清除浮动
9、clear
- 9.1、属性值
写在最后

1、为什么需要浮动了

我们首先要思考以下2个布局中最常见的问题？

如何让多个盒子(div)水平排列成一行？
如何实现盒子的左右对齐？

虽然我们已经了解行内块（inline-block）但是他却有自己的缺陷：

它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
它不能实现以上第二个问题，盒子左右对齐。

2、什么是浮动了

元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制。
移动到指定位置。

3、浮动有什么用了

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等。
浮动最早是用来控制图片，实现文字环绕图片的效果。

4、浮动的基本语法

在 CSS 中，通过 float 中文，浮、漏、特属性定义浮动，语法如下：

选择器 {float: 属性值;
}

4.1、属性值的取值

left

表明元素必须浮动在其所在的块容器左侧的关键字。

right

表明元素必须浮动在其所在的块容器右侧的关键字。

none

表明元素不进行浮动的关键字。

inline-start

关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。

inline-end

关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

4.2、浮动口诀之浮

浮动——浮_浮浮~~~漂浮在普通流的上面。脱离标准流，俗称“脱标”。

.box1 {width: 200px;height: 200px;background-color: rgba(255, 0, 0, 0.5);float: left;
}
.box2 {width: 150px;height: 300px;background-color: skyblue;
}

float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。

4.3、浮动口诀之漏

浮动——漏_漏漏~ 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

.box1 {width: 200px;height: 200px;background-color: rgba(255, 0, 0, 0.5);/* 让第 1 个盒子漂浮起来，不占位置 */float: left;
}
.box2 {width: 150px;height: 300px;background-color: skyblue;
}

所以，box2下面的其实就是跑到box1盒子下面了，被box1给压住了，遮挡起来了

来来来，我们看个立体图

4.4、浮动口诀之特

浮动——特性，float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们已经了解的行内块极其相似。

体验案例——div 水平排列

div {width: 200px;height: 200px;background-color: pink;/* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 *//* display: inline-block; *//* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */float: left;
}
.two {background-color: hotpink;
}

注意：浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

5、浮动（float）的应用

浮动和标准流的父盒子搭配

我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

6、浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

7、浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

建议：

如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

8、清除浮动

8.1、为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

总结：

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响；
准确地说，并不是清除浮动，而是清除浮动后造成的影响；

8.2、清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

8.3、清除浮动的方法

8.3.1、额外标签法(隔墙法)

是W3C推荐的做法，是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。

8.3.2、父级添加overflow属性方法

可以给父级添加：overflow为 hidden | auto | scroll 都可以实现。

优点：代码简洁。
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

8.3.3、使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}.clearfix {*zoom: 1;/* IE6、7专有 */
}

优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持:after，使用zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

8.3.4、使用双伪元素清除浮动

使用方法：

.clearfix:before,
.clearfix:after { content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

优点：代码更简洁，结构语义化正确。
缺点：由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
代表网站：小米、腾讯等。

9、clear

clear属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

9.1、属性值

none

元素不会向下移动清除之前的浮动。

left

元素被向下移动用于清除之前的左浮动。

right

元素被向下移动用于清除之前的右浮动。

both

元素被向下移动用于清除之前的左右浮动。

inline-start

该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

inline-end

该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

CSS系列之浮动详解相关推荐

CSS系列之定位详解
文章の目录 1.为什么使用定位了 2.什么是定位了 3.定位的构成 3.1.边偏移 3.1.1.top 3.1.1.1.属性值 3.1.1.2.注意点 3.1.2.right 3.1.2.1.属性值 ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
Docker系列07—Dockerfile 详解
Docker系列07-Dockerfile 详解 1.认识Dockerfile 1.1 镜像的生成途径基于容器制作 dockerfile,docker build 基于容器制作镜像,已经在上篇Do ...
mongo 3.4分片集群系列之六：详解配置数据库
这个系列大致想跟大家分享以下篇章: 1.mongo 3.4分片集群系列之一:浅谈分片集群 2.mongo 3.4分片集群系列之二:搭建分片集群--哈希分片 3.mongo 3.4分片集群系列之三:搭建 ...
CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题比如 border: 0xp solid #fff;两个浏 ...
ftm模块linux驱动,飞思卡尔k系列_ftm模块详解.doc
飞思卡尔k系列_ftm模块详解 1.5FTM模块1.5.1 FTM模块简介FTM模块是一个多功能定时器模块,主要功能有,PWM输出.输入捕捉.输出比较.定时中断.脉冲加减计数.脉冲周期脉宽测量.在K1 ...
html 自定义打印模板,HTML+CSS入门自定义模板详解
本篇教程介绍了HTML+CSS入门自定义模板详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯, ...

CSS系列之浮动详解