浮动Float
1.基本概念
float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
设置float就会脱离标准流，但是不会覆盖上面顶下来的元素。
2. 浮动规则1：
2.1 元素一旦浮动后, 脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
定位元素会层叠在浮动元素上面
2.2 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
2.3 浮动元素之间不能层叠
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
image.png
2.4 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
比如行内级元素、inline-block元素、块级元素的文字内容
image.png
2.5 规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐。浮动只能向左，或者向右浮动，不能向上或者向下。
image.png
3.浮动的特点
行内元素、行内块元素、块级元素均可设置浮动属性 float，值为：none(默认) / left / right，设置值为 left 或 right 后，可实现元素向左浮动或向右浮动，浮动后的元素不同于原来的三种显示模式，具有自己的特点：
1、浮动的元素会脱离文档流，多个浮动的兄弟元素会水平排列、自动换行。
2、浮可以随意设置宽高,不分行内元素或者块级元素，strong也可以直接设置宽高
，但默认宽高被其内容撑开。
3、浮动的元素可以完美地设置4个方向的内外边距，且不存在 margin 塌陷 和 margin合并 的问题。
4.浮动常用的场景
解决行内级元素、inline-block元素的水平间隙问题
对于span元素，就算是并列，他们之间还是有间隙。
image.png
那是因为span和span之间有换行符，删除之后就没有空隙了
image.png
不换行的化，阅读性差，一定要换行。
所以将间隙去除的方法：
将多个行内级元素中间的空格(间隙)去除的方法
- 删除换行符(不推荐)
- 将父级元素的font-size设置为0, 但是需要子元素设置回来。就是解析的父亲里面的元素里面的空格是没有font-size的，所以是没有间隙的，但是span一定要设置font-size。
- 通过子元素(span)统一向一个方向浮动即可。浮动元素是紧挨者的。
- flex布局
5.float的问题
浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
◼ 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
◼ 清浮动的目的是
让父元素计算总高度的时候，把浮动子元素的高度算进去
◼ 如何清除浮动呢? 使用clear属性
父元素里面的孩子设置成float之后，父元素就没有高度了。父亲的背景颜色就看不到了。下面的元素就移动上来，盯上了的元素就在float的元素下面，视觉上是重叠了。脱镖元素改在标准流元素上面。
5.1 clear属性
Css属性-clear
◼ clear属性是做什么的呢?
clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
◼ clear的常用取值
left：要求元素的顶部低于之前生成的所有左浮动元素的底部
right：要求元素的顶部低于之前生成的所有右浮动元素的底部
both：要求元素的顶部低于之前生成的所有浮动元素的底部
none：默认值，无特殊要求
◼ 那么我们可以利用这个特性来清除浮动.
给浮动的元素后面加一个div ，设置属性clear:both。而且一般情况下，不会给他设置高度
.line{
Clear:both
}
弊端：如果很多地方都需要浮动，那么每个部分都需要加div，设置class为line，增加了无意义的空标签。而且float（css）产生的问题需要用html（增加空div）元素来解决，违背结构与样式分离的原则。
而且我们就是想给父元素里面增加一个元素，给父元素增加一个伪元素，为元素也是元素。伪元素是行内级非替换元素，设置content为空，就没有宽高，需要设置display为block，这样才会有宽度，因为块级元素独占一行。只要是需要清除浮动的父元素，就给他加这个属性。
.clear_fix:after{
Content:””；
Clear:both;
Display:block
}
以下是固定写法，进行浏览器兼容。
6.浮动的应用
浮动就是块级元素想横着放在一列。Inline-block的化会有换行符号和空格产生的间隙。
网上的一些列表
清楚固定样式
ul, li{
list-style: none;
padding: 0;
margin: 0;
}
没有border的时候。
image.png
style>
/* 公共的class */
.content {
width: 1190px;
margin: 0 auto;
background-color: orange;
}
/* 布局样式 */
.box {
/* margin: 0 -5px; */
/* 3.方案三: 设置负的的margin(没有兼容性) */
margin-right: -10px;
}
.item {
width: 230px;
height: 322px;
background-color: purple;
color: #fff;
/* 浮动 */
float: left;
margin-right: 10px;
/* margin: 0 5px; */
}
/* 1.有可能存在兼容性 */
/* .item:nth-child(5n) {
margin-right: 0;
} */
/* 2.麻烦一点点 */
/* .item.last-item {
margin-right: 0;
} */
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5 last-item">5</div>
</div>
</div>
/body>
</html>
1.宽度是一定的，就设置一个公共的类，写死，给他一个固定宽度。
/* 公共的class */
.content {
width: 1190px;
margin: 0 auto;
background-color: orange;
}
2.网里面放div，让这些div浮动
230+230+230+230+230=1150，设置margin-right为10，总共1190，但是最右面放不下，就往下一行放了，就设置
image.png
.item:nth-last-child(1) {
margin-right: 0;
}
或者
.item:nth-child(5n) {
margin-right: 0;
}
或者
给每第五个元素加一个class ，比如last-item
然后
.item.last-item{
margin-right: 0;
}
这种相对来说比较麻烦，要给第五个加class，但是没有兼容性问题，容易给class加错。
浮动兼容性更好，再加了一个新的结构伪类，兼容性比较差。Ie6-8不兼容nth-child.
以上3个方法都不想使用，怎么办呢？
3.给所有的item外面再包裹一个div。然后给他的margin-right设置一个-10px. 然后就成功了。
image.png
4.4.往1190宽的盒子里放了一个box，这个box的默认宽度auto也是1190.
父级盒子宽度 = 子元素宽度 + ml + mr， 因为ml和mr默认值为0，所以子元素宽度也为1190. 刚才把这个子盒子的mr设置成-10，所以子元素的宽度就是1120. 1120的化就可以装下第五个元素230和他的mr10了。以前装不下他的mr10.
大概是这个样子
image.png
最外面的盒子1190，里面的盒子1200，刚好（230+10）*5 = 1200，所以不会掉到第二行。
绿色的大盒子里面有个粉色的长盒子。所以1200的盒子不是剧中的，但是1190的盒子是居中的。
image.png
Flex也可以解决，但是ie678不兼容。
image.png
以上也是向左浮动，给margin-right设置负值
image.png
image.png
1.整体给一个边框，其他的item设置border-right，但是最后一个会重复。又给外面加，又给里面加，不好控制。
2，单独给每一个设置边框，然后给每一个border-right:none,最后一个没有，这个时候给外面大框加右边，或则给第五个加一个右边框。
3.所有的item都加border，但是中间的都是重复的。（推荐）
大盒子》中盒子》item们
1100 5个盒子，border-box，每个220，其中左右两个border。
丹斯这个时候中间都是重复的。然后，
给item设置margin-left设置-1px，让元素往左移动1px。Flex是没有兼容性的。
这个时候后面会有剩余，因为少了（重叠了）5px，第一个也会移动，因为父子左右margin不会传递，
image.png
这个是给item设置ml为-50的时候。第一个元素相对于父亲向右移动了20px.
image.png
这个是设置+50的时候。
所以宽度减少了5px，我们这个时候只需要给每个border-box设置的宽度增加1px，为221px。
这个时候其实发现，右边是突出一个像素的。
image.png
其实肯定有一个方向是突出的，要么是左边，要么是右边。
1+219 + 1 + 219+ 1 + 219+ 1 + 219+ 1 + 219 + 1 =1101，这个1px是多出来的。要么把这个像素放到左面，要么放到右面。
或者给某个item的宽度减1px
1.border给谁加，（给每个item加）
2.加上border之后，宽度如何计算。（ 220* 5 = 1100 ）每个盒子220px
3.中间4个线是粗的。给每个都设置margin-left为-1. 重叠，少了5px.
4.给每个宽度增加1px。变成221px.
7.布局方案总结
image.png
