一. 什么是 CSS Float（浮动）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
二.为什么需要浮动
- 想要把多个块级元素放在一行显示,打破常规布局.
使用行内块元素布局页面有一定的局限性,中间会有空白间隙.
实际开发中盒子之间 间隙会有严格的要求哟..
三.浮动的作用
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
浮动的代码
属性名：float
属性值：
四.浮动的特点
1.浮动元素会脱标，在标准流中不占位置
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
浮动布局注意事项:
1.浮动一般情况下和标准流的父盒子一起搭配使用.
♥先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2 浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?
♥浮动时,当父元素装不下浮动的子元素时,此时此子元素会换行显示
3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题?
♥浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
一浮全浮
4.浮动的元素不能使用text-align:center或者margin:0 auto属性
五. 浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 40px;
background-color: #333;
}
.box {
width: 1226px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
.banner {
width: 1226px;
height: 460px;
background-color: red;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: right;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
</style>
</head>
<body>
<header class="header"></header>
<div class="box"></div>
<div class="banner">
<div class="left"></div>
<div class="right">
</div>
</div>
</body>
</html>六.清除浮动的介绍
清除浮动指清除掉元素float属性。
- 含义：清除浮动带来的影响 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 原因： 子元素浮动后脱标 → 不占位置
- 目的： 需要父元素有高度，从而不影响其他网页元素的布局
七.清除浮动的方法 — ① 直接设置父元素高度
特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
八.清除浮动的方法 — ② 额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
九.清除浮动的方法 — ③ 单伪元素清除法
操作：用伪元素替代了额外标签
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}特点：
优点：项目中使用，直接给标签加类名即可清除浮动
十.清除浮动的方法 — ④ 双伪元素清除法
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}- 特点： 优点：项目中使用，直接给标签加类名即可清除浮动
十一.清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
-
操作： 直接给父元素设置 overflow : hidden
-
特点： 优点：方便
.fahter{
overflow: hidden;
}
