网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
这种元素自然排列的方式，我们称之为====》标准文档流！
浮动 float
左浮动
右浮动
浮动之后 会脱离 标准文档流
溢出 overflow
overflow:
01.visible:默认显示
02.scroll：以滚动条的形式显示溢出部分
03.hidden：溢出部分隐藏
04.auto：自动跳转
我们书写了一个页面，里面有很多块元素，默认排版就是标准文档流！
如果我们想让ul中的li能在一行显示！
01.display
02.浮动
只要是元素设置了浮动就会脱离标准文档流!
如果我们的父元素容不下浮动元素！
可以选择是否显示溢出的元素！
使用overflow!
clear 清除浮动
none 默认
left 在左侧不允许浮动
right 在右侧不允许浮动
both 左右侧都不允许浮动
防止父级边框塌陷的方式：
01.给父级盒子设置宽高！
02.在父级盒子的最后一个位置增加div没有内容
<div class="clear"></div>
给这个div增加样式
.clear{
border: 1px solid black;
clear: both;
}
03.在父盒子中设置溢出处理
overflow: hidden;
04.最终使用的方式 :after伪类
在父盒子中增加一个class="clear"
.clear:after{
display: block;/*在#main div的左后一个位置增加一个块元素*/
content: ''; /*块元素的内容什么都没有*/
clear: both; /*清除浮动*/
}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>网页布局</title> <!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！ 这种元素自然排列的方式，我们称之为====》标准文档流！--> </head> <body> <span>11111</span> <span>22222</span> <span>33333</span> <div>33333</div> <span>11111</span> <span>22222</span> <span>33333</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动属性</title> <style type="text/css"> #main{/*大盒子*/ height: 300px; width: 300px; border: 1px solid red; /*针对于浮动之后 内容溢出的处理 overflow: 01.visible:默认显示 02.scroll：以滚动条的形式显示溢出部分 03.hidden：溢出部分隐藏 04.auto：自动调整 */ overflow: scroll; } #a,#b,#c{ /*三个小盒子*/ height: 150px; width: 110px; border: 1px solid red; margin: 2px; /*浮动之后 会脱离 标准文档流*/ float: right; } </style> </head> <body> <div id="main"> <div id="a">这是第1个盒子</div> <div id="b">这是第2个盒子</div> <div id="c">这是第3个盒子</div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动属性</title> <style type="text/css"> #main{/*大盒子*/ height: 300px; width: 300px; border: 1px solid red; } #a,#b,#c{ /*三个小盒子*/ height: 50px; width: 70px; border: 1px solid blue; margin: 2px; float: left; }/*第三个盒子清除左浮动 #c{ clear: left; }*/ /*清除第二盒子的左浮动*/ #b{ clear: left; } </style> </head> <body> <div id="main"> <div id="a">这是第1个盒子</div> <div id="b">这是第2个盒子</div> <div id="c">这是第3个盒子</div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>防止父级边框塌陷</title> <style type="text/css"> #main{ border: 1px solid red; /*01.给父级div设置高度 height: 500px;*/ /* 03. 设置溢出处理 overflow: hidden;*/ } #a,#b,#c{ /*三个小盒子*/ border: 1px solid red; float: left; /* 01.因为 父级div没有设置高度和宽度！ 子的div右浮动了？脱离文档流 位置没了*/ } /*02. 增加空div 防止父级边框塌陷 .clear{ border: 1px solid black; clear: both; }*/ /*04.推荐使用 after伪类 */ .clear:after{ display: block;/*在#main div的左后一个位置增加一个块元素*/ content: ''; /*块元素的内容什么都没有*/ clear: both; /*清除浮动*/ } </style> </head> <body> <div id="main" class="clear"> <div id="a"><img src="../images/b.png"></div> <div id="b"><img src="../images/b.png"></div> <div id="c"><img src="../images/b.png"></div> <!--02. 增加空div 防止父级边框塌陷 <div class="clear"></div> --> </div> </body> </html>