一、浮动
浮动的定义
float 属性定义元素在哪个方向浮动，任何元素都可以浮动。
值----- -描述
left----- 元素向左浮动
right —元素向右浮动
浮动的原理
浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动
元素向左浮动
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面， 一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现重叠现象
1.浮动作用
<!DOCTYPE html> <!-- 浮动作用： 1.早期的作用：图文环绕 2.现在的作用：网页布局 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ /* 浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离 */ display: inline-block; width: 100px; height: 100px; } .one{ background-color: pink; } .two{ background-color: green; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> </body> </html>2.体验浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* img{ float: left; } */ div{ width: 100px; height: 100px; } .one{ background-color: pink; float: left; } .two{ background-color: green; /* float: right; */ float: left; } </style> </head> <body> <!-- 1.图文环绕 --> <!-- <img src="lbr-img-186.webp" alt=""> 这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的这里有和哪个好克劳斯蛋糕的好方法敦煌饭店好地方豆花饭和删了对方的都是废话多少分考上的 --> <!-- 2.网页布局:块在一行排列--> <div class="one">one</div> <div class="two">two</div> </body> </html>3.浮动特点
<!DOCTYPE html> <!-- 浮动的特点 1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 ・相当于从地面飘到了空中 2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素 3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 4.浮动元素有特殊的显示效果 ・一行可以显示多个 ・可以设置宽高 注意点： ・浮动的元素不能通过 text-align:center 或者 margin:0 auto --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 浮动的标签，顶对齐 */ /* 浮动：在一行排列，宽高生效 -- 浮动后的标签具备行内块特点 */ .one{ width: 100px; height: 100px; background-color: pink; float: left; margin-top: 50px; } .two{ width: 200px; height: 200px; background-color: skyblue; float: left; /* 因为有浮动，不能生效 - 盒子无法水平居中 */ margin: 0 auto; } .three{ width: 300px; height: 300px; background-color: orange; } </style> </head> <body> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> </body> </html>4.浮动案例-小米布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .top{ height: 40px; background-color: #333; } .header{ width: 1226px; height: 100px; background-color: #ffc0cb; margin: 0 auto; } .content{ width: 1226px; height: 460px; background-color: green; margin: 0 auto; } .left{ width: 234px; height: 460px; background-color: #ffa500; float: left; } .right{ width: 992px; height: 460px; background-color: #87ceeb; float: left; } /* CSS 书写顺序：浏览器执行效率更高 1.浮动 /display 2.盒子模型: margin border padding 宽度高度背景色 3.文字样式 */ </style> </head> <body> <div class="top"></div> <div class="header"></div> <div class="content"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>5.浮动案例-小米产品
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ margin: 0 auto; width: 1226px; height: 614px; /* background-color: gold; */ } .left{ float: left; width: 234px; height: 614px; background-color: #800080; } .right{ float: right; width: 978px; height: 614px; /* background-color: green; */ } ul{ /* 去掉列表符号 */ list-style: none; } li{ float: left; margin-right:14px; margin-bottom: 14px; width: 234px; height: 300px; background-color: #87ceeb; } /* 父级宽度不够，浮动不上去 */ /* 第四个 li 和第八个 li 右侧间距清除 */ li:nth-child(4n){ margin-right: 0; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>6.浮动按钮-导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .nav{ margin: 0 auto; width: 640px; height: 50px; background-color: #ffc0cb; } ul{ list-style: none; } li{ float: left; } .nav li a{ display: inline-block; width: 80px; height: 50px; background-color: #ffc0cb; font-size: 16px; text-decoration: none; color: white; line-height: 50px; text-align: center; } .nav li a:hover{ background-color: green; } </style> </head> <body> <div class="nav"> <!-- ul>li*8>a{新闻$} --> <ul> <li><a href="#">新闻1</a></li> <li><a href="#">新闻2</a></li> <li><a href="#">新闻3</a></li> <li><a href="#">新闻4</a></li> <li><a href="#">新闻5</a></li> <li><a href="#">新闻6</a></li> <li><a href="#">新闻7</a></li> <li><a href="#">新闻8</a></li> </ul> </div> </body> </html>7.受浮动影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body> </html>二 清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标 → 不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
1.直接设置父元素高度
<!DOCTYPE html> <!-- 清除浮动的方法 — ① 直接设置父元素高度 ▶ 特点： ・优点：简单粗暴，方便 ・缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; height: 300px; background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body> </html>2.额外标签法
<!DOCTYPE html> <!-- 清除浮动的方法 — ②额外标签法 操作： 在父元素内容的最后添加一个块级元素 给添加的块级元素设置 clear:both 特点： ・缺点：会在页面中添加额外的标签，会让页面的 HTML 结构变得复杂 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } .clearfix{ /* 清除左右两侧浮动的影响 */ clear: both; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top"> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="bottom"></div> </body> </html>3.单伪元素清除法
<!DOCTYPE html> <!-- 清除浮动的方法 — ③ 单伪元素清除法 操作：用伪元素替代了额外标签 特点： ・优点：项目中使用，直接给标签加类即可清除浮动 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* 单伪元素清除法 */ .clearfix::after { content: ''; /* 伪元素添加的标签是行内，要求块 */ display: block; clear: both; /* 为了兼容性 */ height: 0; visibility: hidden; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> <!-- 通过CSS添加一个标签 --> </div> <div class="bottom"></div> </body> </html>4.双伪元素清除法
<!DOCTYPE html> <!-- 清除浮动的方法 — ④ 双伪元素清除法 特点： ・优点：项目中使用，直接给标签加类即可清除浮动 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* .clearfix:before 作用：解决外边距塌陷问题 外边距塌陷：父子标签，都是块级，子级加 margin 会影响父级的位置 */ /* 清除浮动 */ .clearfix::before, .clearfix::after { content: ''; display: table; } /* 真正清除浮动的标签 */ .clearfix::after { clear: both; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> <!-- 通过CSS添加一个标签 --> </div> <div class="bottom"></div> </body> </html>5.给父元素设置 overflow：hidden
<!DOCTYPE html> <!-- 清除浮动的方法 — ⑤给父元素设置 overflow：hidden 操作: 直接给父元素设置 overflow：hidden 特点: 优点：方便 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; overflow: hidden; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } </style> </head> <body> <!-- 父子级标签,子级浮动,父级没有高度, 后面的标准盒子会受影响，显示到上面的位置--> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div> </body> </html>
