CSS浮动详解
- 创业
- 2025-09-22 01:36:01

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>上一篇
请解释Node.js中的网络模块(http、https),如
下一篇
稀疏数组学习