浮动
浮动的概念
- 什么是浮动，他在css中占据什么样的位置
- 网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
- 在css中有三种方式来定位位置
- 普通文档标准流方式 （默认方式）
- 浮动流方式 （飘浮）
- 定位方式
- 在css中有三种方式来定位位置
- 在这之中我们讲到的是div浮动方式，元素的浮动顾名思义就是可以飘浮起来的东西，设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定的位置。
- 网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
- 为什么有浮动？他有什么作用，他的优势和劣势是什么？
- 为什么有浮动
- 浮动在网页中一开始的作用不大，用来实现文字在图片四周达到文字环绕的效果，既然是有用处的自然他就出现了，之后 慢慢的发现浮动很有意思，可以使块元素一行显示，就把更多的功能作用在了页面布局上了
- 浮动在网页中一开始的作用不大，用来实现文字在图片四周达到文字环绕的效果，既然是有用处的自然他就出现了，之后 慢慢的发现浮动很有意思，可以使块元素一行显示，就把更多的功能作用在了页面布局上了
- 优势
- 使得布局的方式 更加多样化适用于自定义布局
- 劣势
- 因为浮动的原因，该元素盒子是飘浮在其他标准流盒子之上的
- 为什么有浮动
CSS浮动属性float详解
- 浮动的几个属性值有那些？他的作用是什么
* 选择器：{声明（属性（float）：属性值）;}
| 属性值 | 作用 |
|---|---|
| left | 元素盒子左浮动 |
| right | 元素盒子右浮动 |
| none | 元素盒子没有使用浮动（默认值） |
CSS浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三个盒子使用浮动来实现并排效果</title>
<style>
div{
float: left;
width: 200px;
height: 200px;
text-align: center;
}
div::after{
content: "";
line-height: 200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: red;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"> box 1</div>
<div class="box2"> box 2</div>
<div class="box3"> box 3</div>
</body>
</html>
CSS浮动清除
- 清除浮动的属性：clear；
| 属性值 | 作用 |
|---|---|
| left | 元素盒子清除左浮动（需要给清除浮动的第一个最左边的盒子添加clear：left清除左浮动） |
| right | 元素盒子清除左浮动（需要给清除浮动的第一个最右边的盒子添加clear：right） |
| both | 所有元素盒子清除（需要作用在要清除的浮动元素最下面） |
如果有用浮动，就应该尽量清除浮动
就好比人生苦短，有始有终
世间的繁华，只能一生去观望
美好的愿望，只能一世去实现
一世一轮回
- 为什么要清除浮动？
- 前面也有说过，因为原本浮动是用来做字体图片排版的，之后用来做div布局，必定会有一些不兼容的问题需要解决，虽然是一个缺点，但是不能说浮动元素不好用吧
清除浮动的几种方法
- 给浮动的最后一个标签再额外加上一个标签给上clear：both属性
- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差。
- 第一种方式的升级版：通过给高度塌陷的元素添加 :after 伪类元素 相当于在所右子元素浮动元素的最后面添加了一个标签,加上clear：both；优点也体现出来了
- 优点： 符合闭合浮动思想 结构语义化正确
- 缺点： 由于IE低版本浏览器ie7以下不支持:after伪类元素，但是可以通过添加zoom：1来做ie的兼容
- 给父级元素添加overflow属性方法
- 可以通过触发BFC的方式来实现清除浮动效果。
- 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
- 注意：none不可以，他不会触发BFC
- 优点： 代码简洁
- 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素和如果使用auto和scroll会出现滚动条，一般情况下是不需要滚动条的。
通用 万能清浮法
该方法是最兼容的方法了，几乎解决了所有会出现版本问题的方式
.clearAll{
zoom:1; /*因为伪类元素在ie7及以下不兼容的兼容方法*/
}
.clearAll:after{
center:"";
display:block; /* 设置块元素，这样他不会和元素并排，而是最后一个浮动元素的下面*/
clear:both; /* 清除浮动 上面的三个都要有，缺一不可，下面是解决兼容问题*/
overflow:hidden; /*再加上一层保障，就万无一失了*/
visibility:hidden; /*把这个伪元素彻底隐藏，但是他还是存在*/
height:0; /*给这个伪元素加上高度，这样他就算在center里面写内容也不显示*/
}
高度塌陷的产生条件
- 产生条件
- 父级元素因为子级浮动引起内部高度为0 产生的高度塌陷
- 解决方法
- 给父元素加固定高度，使父元素自己撑开
- 给父元素触发BFC来实现父元素被子元素撑开效果