**1.**浮动的简介
浮动是用来实现文字环绕图片效果的
2.元素浮动后会有哪些影响
对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟 无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元 素。
css
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动产生的影响</title>
<style>
.outer{
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid black;
margin: 5px;
}
/* 对父元素的影响： 不能撑起父元素的高度，
导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。 */
.box1,.box2,.box3{
float: left;
}
</style>
</head>
<body>
<div class="outer">
<!-- 对前面的兄弟无影响 -->
<!-- <div class="box box0">0</div> -->
<div class="box box1">1</div>
<div class="box box1">2</div>
<div class="box box1">3</div>
<!-- 对后面的有影响 -->
<!-- 123都浮动了，4在1后面，但是文字随图片浮动在下面 -->
<!-- <div class="box box4">4</div> -->
</div>
</body>
</html>**对父元素的影响：**不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元 素。
**对兄弟元素的影响：**后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对后面的兄弟也影响
对前面的兄弟无影响
3.解决浮动产生的影响（清除浮动）
css
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动产生的影响</title>
<style>
.outer{
width: 500px;
background-color: gray;
border: 1px solid black;
/* 1. 方案一： 给父元素指定高度 */
height: 112px;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid black;
margin: 5px;
}
.box1,.box2,.box3{
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box1">2</div>
<div class="box box1">3</div>
</div>
</body>
</html>- 方案一： 给父元素指定高度
但是子元素后面元素还是在浮动元素的后面
2. 方案二： 给父元素也设置浮动，带来其他影响。
效果跟方案1一样
- 方案三： 给父元素设置 overflow:hidden 。
子元素后面的元素消失了更严重
但是父元素的兄弟元素没有影响
- 方案四： 在所有浮动元素的最后面， 添加一个块级元素 ，并给该块级元素设置 clear:both 。
解决了 父元素的兄弟元素没有影响； 子元素后面的元素没有在浮动的元素后面
但是父元素的高度塌陷了
css
.box4{
/* 清除box4之前所有产生浮动元素的影响 */
clear:both;
}添加的只能是块级元素
总结：
在浮动元素后面添加一个没有高度文字块级标签，然后消除这个标签前面的所有浮动元素
css
.mafa{
/* 清除mafa之前所有产生浮动元素的影响 */
clear:both;
}
- 方案五 ： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。 ===> 推 荐使用
css
/* ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。
在父元素最后的位置创建一个子元素
*/
.outer::after{
content: '';
display:block;
clear:both;
}
完整代码
css
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动产生的影响</title>
<style>
.outer{
width: 500px;
background-color: gray;
border: 1px solid black;
/* 1. 方案一： 给父元素指定高度 但是子元素后面还是在浮动元素的后面*/
/* height: 112px; */
/* 2. 方案二： 给父元素也设置浮动，
带来其他影响。但是子元素后面还是在浮动元素的后面 */
/* float: left; */
/* 3. 方案三： 给父元素设置 overflow:hidden 。 */
/* overflow:hidden; */
/* 4. 方案四：
在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。 */
/* 5. 方案五： 给浮动元素的父元素，设置伪元素，
通过伪元素清除浮动，原理与方案四相同。===> 推荐使用 */
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid black;
margin: 5px;
}
.box1,.box2,.box3,.box4{
float: left;
}
.mafa{
/* 清除mafa之前所有产生浮动元素的影响 */
clear:both;
}
/* ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。
在父元素最后的位置创建一个子元素
*/
.outer::after{
content: '';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box1">2</div>
<div class="box box1">3</div>
<!-- 对后面的有影响 -->
<div class="box box4">4</div>
<!-- <div class="mafa"></div> -->
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi adipisci accusantium veniam quos sint repellat porro neque, ex nesciunt dignissimos praesentium magni maxime saepe veritatis atque cumque illo aut facere.</div>
</body>
</html>布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
4.浮动练习
css
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 左浮动 */
.leftFD {
float: left;
}
/* 左浮动 */
.rightFD {
float: right;
}
/* 清除浮动 */
.clearFD::after {
content: '';
display: block;
clear: both;
}
/* 设置盒子块水平居中 */
.container {
width: 960px;
text-align: center;
margin: 0 auto;
}
.logo,
.banner1,
.banner2 {
height: 80px;
background-color: aqua;
line-height: 80px;
}
.logo {
width: 200px;
}
.banner1 {
width: 540px;
margin: 0 10px;
}
.banner2 {
width: 200px;
}
.menu {
height: 30px;
background-color: blueviolet;
margin-top: 10px;
}
.content {
margin-top: 10px;
}
.itme1,
.itme2 {
height: 198px;
width: 368px;
border: 1px solid black;
margin-right: 10px;
background-color: chocolate;
line-height: 198px;
}
.item3,
.item4,
.item5,
.item6 {
height: 198px;
width: 178px;
border: 1px solid black;
background-color: yellow;
line-height: 198px;
margin-right: 10px;
}
.bottom {
margin-top: 10px;
}
.item7,
.item8,
.item9 {
width: 198px;
height: 128px;
border: 1px solid 1px;
line-height: 128px;
margin-bottom: 10px;
background-color: green;
}
</style>
</head>
<body>
<!-- 盒子模块 -->
<div class="container">
<!-- 页面头部 -->
<div class="page-header clearFD">
<div class="logo leftFD">logo</div>
<div class="banner1 leftFD">banner1</div>
<div class="banner2 leftFD">banner2</div>
</div>
<!-- 设置菜单 -->
<div class="menu">菜单</div>
<!-- 设置内容区 -->
<div class="content clearFD">
<!-- 分左侧 -->
<div class="left leftFD">
<!-- 分上侧 -->
<div class="top clearFD">
<div class="itme1 leftFD">栏目一</div>
<div class="itme2 leftFD">栏目二</div>
</div>
<!-- 分下侧 -->
<div class="bottom clearFD">
<div class="item3 leftFD">栏目三</div>
<div class="item4 leftFD">栏目四</div>
<div class="item5 leftFD">栏目五</div>
<div class="item6 leftFD">栏目六</div>
</div>
</div>
<!-- 分右侧 -->
<div class="right rightFD">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
</div>
</body>
</html>