网页布局的核心———用CSS来摆放盒子 CSS提供了三种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中 1.普通流（标准流） 块级元素会独占一行，从上向下顺序排列： 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序进行排列，碰到父元素边缘则自动换行 常用元素：span、a、i、em等 2.浮动 让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。 3.定位 将盒子定位在浏览器的某一个位置——css离不开定位，特别是后面的js特效
1.如何让多个盒子(div)水平排列成一行 2.如何实现盒子的左右对齐 虽然前面学过行内块（inline-block）但是它有自己的缺陷： 1.它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足第一个问题 2.它不能实现以上第二个问题，盒子左右对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 500px; height: 200px; } .one{ float: left; background-color: red; } .two{ float: left; background-color: green; } .three{ float: left; background-color: blue; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ height: 500px; width: 300px; border: 1px solid red; border-collapse: collapse; } .one{ float: left; height: 200px; width: 100px; background-color: green; color: red; border: none; } .two{ float: right; height: 200px; width: 100px; background-color: blue; color: red; border: none; } </style> </head> <body> <div> <div class="one">左青龙</div> <div class="two">右白虎</div> </div> </body> </html>概念：元素的浮动是指设置了浮动属性的元素会 1.脱离标准普通流的控制 2.移动到指定位置 作用： 1.让多个盒子（div）水平排成一列，使得浮动成为布局的重要手段。 2.可以实现盒子的左右对齐等 3.浮动最早是用来控制图片，实现文字环绕图片的效果 语法 在CSS中，通过float，浮漏特属性定义浮动，语法如下：
选择器{float：属性值;} 属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动(1)浮动口诀之浮 浮动——浮浮浮，漂浮在普通流上面。脱离标准流。俗称脱标。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 150px; height: 200px; background-color: red; float: left; } .box2{ width: 200px; height: 250px; background-color: green; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>小结： float属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。 （2）浮动口诀之漏 浮动——漏漏漏，浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来的位置，是脱离标准流的，我们俗称脱标。 （3）浮动口诀之特 浮动——特性 float属性会改变元素的display属性 任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。 注意：浮动元素是相互贴靠在一起的，但是如果父级宽度装不下这些浮动盒子，多出的盒子就会另起一行对齐。
我们使用浮动的核心目的——让多个块级盒子在同一行显示。因为这是我们最常见的一种布局方式。 float——浮漏特
特点说明浮加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。漏加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。特特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙浮动和标准流的父盒子搭配 我们知道浮动是脱标的，会影响下面的标准流元素，此时我们需要给浮动的元素添加一个标准流的父亲，这样最大化的减小了对其它标准流的影响。 一个完整的网页，是标准流+浮动+定位一起完成的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } li { list-style: none; } .box{ width: 1226px; height: 615px; background-color: pink; margin: auto; } .left{ width: 234px; height: 615px; background-color: purple; float: left; } .left image{ width: 100%; } .right{ width: 992px; height: 615px; background-color: skyblue; float: right; } .right li{ float: left; width: 234px; height: 300px; background-color: pink; margin-left: 14px; margin-bottom: 15px; } </style> </head> <body> <div class="box"> <div class="left"></div> <ul class="right"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏案例</title> <style> *{ padding: 0; margin: 0; } li{ list-style: none; } .banner{ width: 760px; height: 150px; background-color: pink; margin: auto; } .nav{ width: 760px; height: 32px; background-color: pink; margin: auto; background: url(../images/nav_bg.jpg) repeat-x; } /*因为li让文字竖着显示，所以必须给li添加浮动*/ .nav ul li{ float: left; } /*一定是个给a大小，因为我们需要a:hover*/ .nav ul li a{ display: block; width: 80px; height: 32px; background-color: pink; background: url(../images/button1.jpg) no-repeat; font-size: 12px; text-decoration: none; color: #40510a; text-align: center; line-height: 32px; } .nav ul li a:hover{ background-image: url(../images/button2.jpg); } </style> </head> <body> <!-- banner是广告条的意思 --> <div class="banner"> <img src="../images/banner.jpg" > </div> <div class="nav"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">网站首页</a></li> <li><a href="#">网站首页</a></li> <li><a href="#">网站首页</a></li> <li><a href="#">网站首页</a></li> <li><a href="#">网站首页</a></li> </ul> </div> </body> </html>（1）浮动元素与父盒子的关系 子盒子的浮动参照父盒子的对齐 不会与父盒子的边框重叠，也不会超过父盒子的内边距 （2）浮动元素与兄弟盒子的关系 在一个父级盒子中，如果前一个兄弟盒子是： 浮动的，那么当前盒子会与前一个盒子的顶部对齐。 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。 建议： 如果一个盒子里面有多个子盒子，如果其中一个子盒子浮动了，其他兄弟也应该浮动。防止引起问题。
