浮动是布局时使用的，网页布局的本质是使用css拜访盒子，css提供了三种传统布局方式，分别是标准布局(流)，浮动布局(流)与定位布局(流)。(移动端的布局方式会更多)大多数网页都会同时使用这三种布局方式
我们之前采用的都是标准布局(按照默认方式排列盒子)
目录
1 初识浮动属性
块元素默认都是竖着排的
如果你把它改成行内块元素
它就会横着排，但是我们发现默认有缝隙，而且这个缝隙我们无法调整
这个时候我们可以加入浮动
此时它并非行内块元素也可以横向排列，并且没有空隙
一般我们使用标准布局排列自动换行的块元素，浮动布局排列在同一行的块元素
下面我们来说我们刚刚使用的float，它的语法是这样的
有三个可选属性值
- none 不浮动(默认值)
- left 向左浮动
- right 向右浮动
被设置浮动的盒子有两种情况
- 移动到左边缘或右边缘
- 在向左或向右的过程中碰到另一个浮动的盒子，然后停住
2 浮动特性
2.1 浮动元素会脱离标准流(脱标)
浮动的元素是浮起来的，可以理解为它并不在原来的图层。当不在一个图层时，被设置浮动的盒子就不会保留原来的位置，原来的位置就会被其他标准流的盒子占有
我们现在搞两个盒子，一个是浮动的，一个是标准的
它的效果是这样的
浮动的盒子会浮在标准的盒子之上，但是并不会挡住标准盒子的内容（文字，图像等）
我们这里做一个这个例子
代码是这样的
效果是这样的
2.2 浮动元素会在一行内显示并且顶部对齐
我们现在搞三个大小颜色不同，但都浮动的三个盒子
它的效果是这样的
我们发现他们顶部是对齐的，并且都在一行中
- 当一行中装不开的时候，浮动会自动换行
我们再搞一个右浮动的盒子
发现它的顶端依然与其他浮动的盒子对齐
如果中间出现一个不浮动的盒子，那么它就会换行
2.3 浮动元素会具有行内块元素的特征
任何元素都可以被设置为浮动
我们现在有一个行内元素span
它的效果是这样的，我们明显发现宽高是没有生效的
现在我们对其设置为浮动
我们发现宽高的设置生效了
3 浮动属性的一个例子
在实际使用中，我们常把标准流的盒子作为浮动流盒子的父对象，这样就能约束浮动流盒子，如果我们不想多定义css中的类的话，我们可以使用ul与li
4 清除浮动
我们经常会遇到父元素不能设置高度的情况，原因可能有多重，比如新闻页面，我们想要新闻随着内容走，我们不能没发一篇新闻我们都对页面设置一个高度，这个就很麻烦
如果不设置高度，那么我们不设置高度的盒子里面有浮动元素，又会影响其他的盒子，就像这样
我们发现由于浮动的原因，first_father这个盒子没了
这个时候我们就要使用到清除浮动了，它的语法是这样的
有三个可用的属性值
- left 消除左侧浮动影响
- right 消除右侧浮动影响
- both 消除两侧浮动影响
有这么几种能配和的方法，我们一个一个看一下
4.1 额外标签法
我们直接在盒子的最后的地方加入br标签，然后给br标签加上clear:both的样式
- 只要是块元素就行，一般是用br或者div
此时就发现有第一个盒子的位置了
我们现在变换一下子盒子的高度
发现依然生效，第一个盒子随着子盒子的变化而变化
4.2 父元素添加 overflow
overflow后除了跟hidden，还可以跟auto与scroll，都可以达到下面的效果
overflow这个我们放到后面具体讲，这里知道它的用法就行
4.3 伪元素法 :after
这个涉及到的属性比较多，我们在这里看一下就行，如果想了解原理的话可以看一下这个的P290 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili ,包括后面要说的 双伪元素清除浮动 与这个原理是相似的
可以达到与之前相同的效果
一般的写法是搞一个名为clearfix的类的css，然后把这个类给父元素，像这样
- *zoom:1 的作用的兼容低版本浏览器
一样能达到效果
这样看起来是很麻烦，但是这样如果要消除好多盒子浮动的时候，代码复用性是最好的
4.4 双伪元素清除浮动
用到了:before与:after ，我们也是看看就行
- before就相当于在父元素内最前面加了一个盒子，after就相当于父元素内最后面加了一个盒子，这两种伪元素的方法，相当于额外标签法的另一种写法
- table是转变为表格类型，转变后before与after就会在同一行出现
同样使用clearfix这个类名，然后给父元素，发现效果一样
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
