css的浮动详解
目录
一、什么是浮动？
二、浮动的特点
三、什么是高度塌陷？
四、高度塌陷的解决方案
解决方案一、
解决方案二、
清除浮动
解决高度塌陷方案三
解决方案四
完善方法
一、什么是浮动？
浮动 ：就是使用float样式，使元素脱离文档流
可选值：
none 默认值，不设置浮动
left 向左浮动
right 向右浮动
二、浮动的特点
1、一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流得位置， 就会被它下面的元素挤上来
2、如果浮动元素它上面的元素不浮动，则浮动元素无法上移
3、浮动元素也不会超过它前面浮动元素
4、浮动元素不会超出它的父元素
5、当浮动元素遇到了文字，浮动元素不会覆盖文字， 文字会环绕在浮动元素的周围，从而有文字环绕图片的效果。 这也是设置浮动最开始的想要的效果。
6、当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后， 元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块。
三、什么是高度塌陷？
一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。
四、高度塌陷的解决方案
解决方案一、
给父元素设置自己的高度，但不推荐使用。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.outer {border: 10px red solid;height: 100px;}.inner {width: 100px;height: 100px;background-color: blue;float: left;}.box3 {height: 100px;background-color: yellow;}</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"></div></body>
</html>
解决方案二、
给元素开启BFC（块级格式化上下文）
BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块
具有一些特点，这些特点，可以帮助我们解决一些问题
1、开启BFC的元素，垂直方向外边距不会重叠
2、开启BFC的元素，不会被浮动元素覆盖
3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题
如何开启BFC
1、设置浮动
可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
2、将元素转成行内块
可以解决高度塌陷，但宽度会丢失，且有三像素问题
3、overflow属性 非visible值
副作用最小，建议使用
4、开启绝对定位
可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.outer {border: 10px red solid;float: left;/* display: inline-block; *//* overflow: hidden; *//* 开启绝对定位 *//* position: absolute; */}.inner {width: 100px;height: 100px;background-color: blue;/* 设置透明度 0-1 0是透明，1是不透明*/opacity: .3;float: left;}.box3 {height: 100px;background-color: yellow;/* 解决外边距重叠问题 */overflow: hidden;}/* .box4{width: 50px;height: 50px;background-color: green;margin-top: 50px;} */</style></head><body><div class="outer"><div class="inner"></div></div><div class="box3"><div class="box4"></div></div></body>
</html>清除浮动
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box1 {width: 100px;height: 100px;background-color: yellow;float: right;}.box2 {width: 200px;height: 200px;background-color: yellowgreen;float: left;}/* 需求：消除box2浮动对box3的影响 */.box3 {width: 300px;height: 300px;background-color: skyblue;clear: both;}</style></head><body><!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 --><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>
解决高度塌陷方案三
可以在浮动元素下面添加一个空白的块元素，由于这个块元素没有浮动，还在文档流中
可以给这个块元素设置清除浮动，让其撑开父元素的高度
缺点是页面多了一个空白的结构
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box1 {border: 10px solid red;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}.box3{background-color: yellowgreen;clear: both;}</style></head><body><div class="box1"><div class="box2"></div><div class="box3"></div></div></bod解决方案四
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个div的原理一样，可以达到一个相同的效果，
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box1 {border: 10px solid red;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}.clearfix::after {content: "";/* display: block; */display: table;clear: both;}.w{width: 1200px;margin: 0 auto;}</style></head><body><div class="box1 clearfix"><div class="box2"></div><!-- <div></div> --></div></body>
</html>完善方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">.box1 {width: 300px;height: 300px;background-color: #bfa;/* 父子外边距重叠解决一 *//* overflow: hidden; */}.box2 {width: 200px;height: 200px;background-color: yellow;margin-top: 100px;}/* 演示高度塌陷 */.box3 {border: 10px red solid;}.box4 {width: 100px;height: 100px;background-color: yellowgreen;float: left;}/* 解决父子外边距重叠解决高度塌陷 */.clearfix::before,.clearfix::after {content: "";display: table;clear: both;}</style></head><body><div class="box1 clearfix"><div class="box2"></div></div><div class="box3 clearfix"><div class="box4"></div></div></body>
</html>