建设系统网站企业密信下载app下载官网
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>