浮动布局

什么是浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
对于新手 CSS 开发人员，尤其前端 Web产品开发人员，float 属性可以说是用得最频繁的布局属性了，所以他们很可能会对 float属性有误解，认为 float 属性就是为各种块状布局而设计的，实际上不是的。浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

属性

float：left； 左浮动
float：right；右浮动

浮动的情况

下面我就用这个布局为例子来讲解浮动，css样式外面的div给了一个高度，其他的不多说。
　　html代码
　　
　　css代码

　　效果图
　　
　　1.左浮动 float:left;

给里面的三个标签 float:left; 属性，看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的，但是看下图会发现他们按照顺序排列成一排了。
　　
　　2.右浮动 float:right;

同样的我们给box中的p标签一个 float:right; 属性。他们会按照顺序排到右边去了。
　　
　　3.这一次我们只给第二个p浮动来看看会发生什么情况，这时候你会发现，3不见了，他其实在2的下面，我给3一个宽一点的宽度。会发现3在2的下面。
　　
　　
　　4.把外面的div宽度变小一些，p浮动

如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示
　　

浮动之后有很多特性

1.块级元素可以横排显示
2.行内元素可以设置宽度和高度
3.元素没有设置宽度和高度时，宽度为内容撑开宽
4.支持margin
5.脱离文档流
6.提升半层级
问题：不支持margin:auto;

为什么要清除浮动

首先我们先不设置高度，给外部盒子设置一个边框，此时我们会发现浮动前盒子正常

但是在浮动后，我们会发现子元素浮动会造成父级盒子高度坍塌，这样如果下面在进行继续布局的话会使页面布局错乱。

清除浮动的方法

1、给父元素添加固定高度，缺点：一般都是元素内容撑开高度，拓展性不好。
2、给最后一个浮动元素下面新加一个元素，清除浮动，添加一个clear：both属性；
　 缺点：随意的添加一个空元素，不符合代码规范
　
3、伪元素清除浮动：给浮动元素的父元素添加一个元素clerafix，然后进行伪元素清除浮动。

笔记

1：浮动后：元素本身脱离文档流，原来的位置被其他元素所占据
2：浮动后；在同一个父元素中，目标元素会占据一个浮动后位置。
3：注意：浮动只能是子元素在容器中进行位置移动。如果父容器剩余宽度不能容纳两一个子元素，那么就换行。
4：同一位置多个元素；具有浮动属性的元素；层级高于不具有浮动属性的元素

总结，浮动规律：
第一步：元素在布局流中的起始位置；
第二步：沿自身水平方向进行浮动，如果水平方向空间不够，那么自动换到下一行

5：问题：如果父元素没有有高度那么会出现什么问题呢？？
父元素没有设置固定高度，那么父元素高度由子元素撑起来。
如果所有子元素都脱离了文档流，那么父元素就没有高度了
只有不脱离文档流的元素才能撑起父元素的高度

6： 解决浮动 带来的问题，
- 方式一：给父元素设置一个固定高度
- 方式二：在最后一个浮动元素，元素下面新加一个元素，清除浮动
- 方式三：伪元素清除；给父元素添加伪元素 xxx::after{content:" "；display:block ；clear:both};

以上所写就是我目前学习对浮动知识的理解和总结，谢谢！