CSS浮动详解

1. 浮动的简介

浮动是用来实现文字环绕图片效果的

2.元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

<!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.解决浮动产生的影响（清除浮动）

<!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>

1. 方案一：给父元素指定高度

但是子元素后面元素还是在浮动元素的后面

2. 方案二：给父元素也设置浮动，带来其他影响。

效果跟方案1一样

3. 方案三：给父元素设置 overflow:hidden 。

子元素后面的元素消失了更严重

但是父元素的兄弟元素没有影响

4. 方案四：在所有浮动元素的最后面， 添加一个块级元素 ，并给该块级元素设置 clear:both 。

解决了 父元素的兄弟元素没有影响；子元素后面的元素没有在浮动的元素后面

但是父元素的高度塌陷了

    .box4{/* 清除box4之前所有产生浮动元素的影响 */clear:both;}

添加的只能是块级元素

总结：

在浮动元素后面添加一个没有高度文字块级标签，然后消除这个标签前面的所有浮动元素

 .mafa{/* 清除mafa之前所有产生浮动元素的影响 */clear:both;}

5. 方案五 ：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。 ===> 推荐使用

 /* ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。在父元素最后的位置创建一个子元素*/.outer::after{content: '';display:block;clear:both;}

完整代码

<!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.浮动练习

<!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>