传统网页布局的三种方式:浮动、定位、标准流(普通流/文档流)。
所谓的标准流,就是标签按照规定好的默认方式排列。例如:
块级元素会独占一行,从上往下顺序排列
常用块级元素:div,hr,p,h1-h6,ul,ol,form,table
行内元素会按照顺序从左到右顺序排列,碰到父元素边缘则自动换行。
常用行内元素:span,a,i,em
注意:实际开发中,一个页面基本都包含这三种布局方式(移动端会有新的布局方式)
为什么需要浮动
提问:如何实现一行多个块级元素(如多个div)并列?
如何实现页面左右两个块级元素的对齐?
总结:有很多布局效果标准流无法完成,但是浮动可以解决,因为浮动可以改变标签默认的排列方式。其中浮动最典型的应用就是让多个块级元素一行内并排。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
什么是浮动
float属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘触及包含块或者另一个浮动框的边缘。
.left { width: 200px; height: 200px; background-color: aquamarine; float: left; } .right { width: 200px; height: 200px; background-color: pink; float: left; } <div class="left"> 左边 </div> <div class="right"> 右边 </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.0"> <title>Document</title> <style> .left { width: 200px; height: 200px; background-color: aquamarine; float: left; } .right { width: 200px; height: 200px; background-color: pink; float: left } .middle { width: 200px; height: 200px; background-color: blueviolet; float: left; } </style> </head> <body> <div class="left"> 左边 </div> <div class="middle"> 中间 </div> <div class="right"> 右边 </div> </body> </html>
浮动元素会具有行内块元素特性
例如span作为行内元素原本没有宽高(需要转换为行内块元素),但是若给他添加浮动,则不需要转换成行内块元素。
<style> span, div { float: left; width: 200px; height: 100px; background-color: pink; } p { height: 15 0px; background-color: aqua; float: right; } </style> <span>1</span> <div>2</div> <p>pppb</p>注意:如果块级盒子没有设置宽度,则默认宽度和父级一样宽。但是添加浮动后,它的大小根据内容来决定。
5 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们一般先用标准流的父级排列上下位置,之后内部子元素采取浮动排列左右位置,这也符合网页布局第一准则。
三个浮动布局案例——小米商城
下面我们来实现如图的案例
<style> * { margin: 0; padding: 0; } .box { height: 460px; width: 1200px; background-color: pink; margin: 0 auto; background-color: aqua; } .left { width: 230px; height: 460px; float: left; background-color: purple; } .right { width: 970px; height: 460px; float: right; } </style> <div class="box"> <div class="left"></div> <div class="right"></div> </div>
<style> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1226px; height: 285px; margin: 0 auto; background-color: pink; } .box li { width: 296px; float: left; height: 285px; background-color: darkgray; margin-right: 14px; } /* 注意权重问题 */ .box .last { margin-right: 0; } </style> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul>

最后再做一个手机模块的案例
网页布局第二准则:先布局盒子的大小,再布局盒子的位置
<style> .box { height: 615px; width: 1226px; background-color: pink; margin: 0 auto; } .left { width: 234px; height: 615px; background-color: bisque; float: left; } .right { width: 992px; height: 615px; background-color: yellowgreen; float: left; } .right>div { width: 234px; height: 300px; background-color: cadetblue; float: left; margin-left: 14px; margin-bottom: 14px; } </style> <div class="box"> <div class="left">左</div> <div class="right"> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> <div>2</div> </div> </div>
