5. float浮动
5.0 代码地址
- https://gitee.com/qiangge95243611/java118/tree/master/web/day05
5.1 float的概念
- CSS中的 **float **属性用于指定元素如何浮动,指的是一个元素沿着其父级元素的左侧或右侧排列。
- 当一个元素被浮动时,它被从正常的文档流中取出并向左或向右移动,允许文本和其他元素环绕它。
5.2 float属性值
float属性可以是以下值之一:
- left:元素向左浮动。
- right:元素向右浮动。
5.3 float特点
- 脱离文档流 :浮动元素会脱离正常的文档流,因此不再占据页面中原有的位置,而是向左或向右浮动。
- 文字环绕:浮动元素会导致其他元素和文本绕着它周围排列,这主要用于实现文字环绕图片等效果。
- 父级元素塌陷:其他元素的位置会受到浮动元素的影响,特别是在没有正确清除浮动的情况下,可能导致父容器塌陷或布局错乱。
5.3.1 左浮动
-
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>图片左浮动</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <style> .box { border: 1px solid #000; padding: 20px; } .box > div { border: 1px dashed red; margin-bottom: 10px; padding: 10px; margin-right: 10px; } .box > .layer01 { float: left; } .box > .layer02 { border-color: blue; float: left; } .box > .layer03 { border-color: green; float: left; } .box > .layer04 { border-color: #000; font-size: 12px; line-height: 25px; margin-bottom: 0; } img { display: block; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="layer01"><img src="./img/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="./img/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="./img/photo-3.jpg" alt="鞋子" /></div> <div class="layer04"> 浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。 </div> <div class="clear"></div> </div> </body> </html>
-
效果图
5.3.2 左右浮动
-
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右浮动</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <style> * { padding: 0; margin: 0; box-sizing: border-box; } a { text-decoration: none; color: #000; } .box { width: 750px; padding: 20px; background-color: #ddd; margin: 0 auto; } .title { border: 1px solid #fff; } .title h3 { float: left; } .title .more { float: right; } .title .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="title"> <h3>热门活动</h3> <div class="more"><a href="#">更多</a></div> <!-- 1. 空div清除浮动 --> <div class="clear"></div> </div> </div> </body> </html>
-
效果图
5.4 clear属性
CSS中的clear属性用于控制容器中浮动元素的行为。下面是“clear”属性的详细解释:
-
clear属性指定元素的哪一侧不允许使用浮动元素。
-
它可以有以下值:
- none:未清除任何一方。
- left:元素必须移动到任何左侧浮动元素的下方。
- right:元素必须移动到任何浮动右元素的下方。
- both:元素必须移动到任何浮动元素的下方(左或右)。
-
clear属性主要是用于清除浮动,避免父级元素塌陷。
5.5 overflow属性
CSS中的overflow属性用于控制内容溢出其包含元素时发生的情况。overflow属性可以使用几个值:
-
visible: 默认值。内容不会被剪切,可以在内容框之外呈现。
-
hidden: 超出元素框的内容被剪切而不呈现。
-
scroll: 截断溢出内容,并添加滚动条以允许用户滚动内容
-
auto: 类似于滚动,但只在必要时添加滚动条。
5.6 解决父级元素塌陷
5.6.1 固定高解决塌陷
-
代码实现
<!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, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>固定高清除浮动</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> <style> .box { background-color: #ddd; margin: 0 auto; width: 750px; padding: 10px; /* 2. 固定高度解决父级元素塌陷 */ height: 41px; } p:nth-of-type(1) { float: left; } p:nth-of-type(2) { float: right; } </style> </head> <body> <div class="box"> <p>p左浮动</p> <p>p右浮动</p> </div> </body> </html>
-
效果图
5.6.2 空div解决塌陷
-
代码实现
<!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, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>空div清除浮动</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> <style> .box { background-color: #ddd; margin: 0 auto; width: 750px; padding: 10px; } p:nth-of-type(1) { float: left; } p:nth-of-type(2) { float: right; } .clear { clear: both; } </style> </head> <body> <div class="box"> <p>p左浮动</p> <p>p右浮动</p> <!-- 1. 空div解决父级元素塌陷 --> <div class="clear"></div> </div> </body> </html>
-
效果图
5.6.3 overflow解决塌陷
-
代码实现
<!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, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>overflow清除浮动</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> <style> .box { background-color: #ddd; margin: 0 auto; width: 750px; padding: 10px; /* 3. 溢出隐藏,解决父级元素塌陷 */ overflow: hidden; } p:nth-of-type(1) { float: left; } p:nth-of-type(2) { float: right; } </style> </head> <body> <div class="box"> <p>p左浮动</p> <p>p右浮动</p> </div> </body> </html>
-
效果图
5.6.4 伪类元素解决塌陷
-
代码实现
<!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, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>伪类元素清除浮动</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet"<