先來了解一下當前都有哪些網頁布局方式
（說個悄悄話：我面試的時候有遇到過！！！！原題，一毛一樣。當時只講了一下flex。）
1.靜態布局（Static Layout）：即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。
優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。
2.流式布局(Liquid Layout):網頁中主要的划分區域的尺寸使用百分數（搭配min-*、max-*屬性使用）。
3.彈性布局：flex(強大、上手快、主流)
4.響應式布局：媒體查詢+流式布局
1、布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。
優點：適應pc和移動端，如果足夠耐心，效果完美
缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。
5.浮動布局：float:left/right
6.定位布局：position:absolute/relative/fixed/static
什么是浮動布局：
浮動的框可以向左或向右移動。直到它的外邊緣碰到包含框或另一個浮動的邊框為止
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框就像浮動框不存在一樣
特點：脫離文檔流（css布局三種機制：標准流 / 浮動 / 定位）
優點：圖文混排可以實現文字環繞效果
可以使塊級元素同行排列
兼容性好，通常和固定布局結合使用
缺點：父級元素高度坍塌 因為脫離了文檔流，父級中沒有東西了，高度無法撐開了”
float:元素實現浮動效果
none:不浮動（默認值）
left:向左浮動
right：向右移動
浮動原理
元素一旦浮動，脫離標准流
朝着向左或向右方向移動，直到自己的邊界緊貼着包含塊（一般是父級）或其他浮動元素
而且浮動元素的頂端也不能超過包含塊的頂端及之前所有浮動元素的頂端
浮動效果
<style> .parent{ width:200px; height: 200px; border: 1px solid lightcoral; } .son{ width: 80px; height: 80px; background-color: lightskyblue; float:right } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body>
float應用之一：圖文環繞
<style> .parent{ width: 500px; height: 500px; border:1px solid palevioletred; } img{ width: 300px; float: left; } </style> </head> <body> <div class="parent"> <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1277120522,1337367569&fm=26&gp=0.jpg" alt=""> <span> 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ 請大家欣賞美女！ </span> </div> </body>
float應用二：浮動布局
<style> .container{ width:500px; height: 220px; background: #ccc; } .item1,.item2{ width: 100px; height: 200px; margin-left: 10px; float: left; } .item1{ background-color: plum; } .item2{ background-color: orange; } .item3{ width: 240px; height: 200px; background-color:lightsteelblue; float: left; margin-left: 10px; } .item3-box{ width:100px; height: 80px; background-color: mediumpurple; float: left; } .item3-box1,.item3-box3{ margin-right: 10px; } .item3-box3,.item3-box4{ margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"> <div class="item3-box item3-box1"></div> <div class="item3-box"></div> <div class="item3-box item3-box3"></div> <div class="item3-box item3-box4"></div> </div> </div> </body>
清除浮動的方式：
1.給父級元素設置高度（不推薦）
height:500px; 缺點：父元素高度固定了
2.添加額外標簽，在要清除浮動元素最后添加一個空白標簽（這個標簽需要是塊或行標簽span和a無效）（不推薦）
<div style="clear:both"></div> 缺點“添加無意義標簽，語義化差
3.在父元素內部的最后使用br標簽和其自身的html屬性（不推薦）
<br clear="all>
4.給父元素設置overfloe:hidden/auto（不推薦）
overflow:hidden 缺點：超出父元素的會被隱藏
overflow：auto 缺點：不能自定義高度
5.給父元素設置display:inline-block（不推薦）
display:inline-block 缺點：margin:0 auto失效了
6.父元素設置display:table（不推薦）
display:table 跟flex有點類似，仍不推薦使用
7.給父元素加after偽元素（偽元素默認是行內元素，建議設置height:0,否則會比實際高出若干元素）（推薦⭐⭐⭐⭐⭐）
/* 清除浮動的終極版 */ .container::after{ content: ''; clear: both; display: block; height: 0; visibility: hidden; } /* 兼容性問題，IE6不支持偽元素after */ .container{ zoom:1 }
<style> .container{ width:500px; /* 清除浮動方法一：父元素設置高度 */ /* height: 220px; */ background: #ccc; } .item1,.item2{ width: 100px; height: 200px; margin-left: 10px; float: left; } .item1{ background-color: plum; } .item2{ background-color: orange; } .item3{ width: 240px; height: 200px; background-color:lightsteelblue; float: left; margin-left: 10px; } .item3-box{ width:100px; height: 80px; background-color: mediumpurple; float: left; } .item3-box1,.item3-box3{ margin-right: 10px; } .item3-box3,.item3-box4{ margin-top: 10px; } /* 清除浮動的終極版 */ .container::after{ content: ''; clear: both; display: block; height: 0; visibility: hidden; } /* 兼容性問題，IE6不支持偽元素after */ .container{ zoom:1 } </style> </head> <body> <!-- 清除浮動方法四：給父元素設置overfloe:hidden/auto --> <!-- <div class="container" style="overflow:hidden/hidden"> --> <!-- 清除浮動方法五：給父元素設置display:inline-block--> <!-- <div class="container" style="display:inline-block"> --> <!-- 清除浮動方法六：給父元素設置display:table--> <!-- <div class="container" style="display:table"> --> <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"> <div class="item3-box item3-box1"></div> <div class="item3-box"></div> <div class="item3-box item3-box3"></div> <div class="item3-box item3-box4"></div> <!-- 清除浮動方法三：添加額外標簽，在要清除浮動元素最后添加一個空白標簽 --> <!-- <div style="clear:both"></div> --> </div> <!-- 清除浮動方法二:在父元素內部的最后使用br標簽和其自身的html屬性 --> <!-- <br clear="all"> --> </div>
面試題：假設高度一定，請寫出三欄布局，左右寬度200px；中間自適應
<style> .left{ width: 200px; height: 300px; background-color: palevioletred; float: left; } .right{ width: 200px; height: 300px; background-color: paleturquoise; float: right; } .center{ width: 100%; height: 300px; background-color: orange; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div>
//注意中間的塊放在右邊的塊下面 <div class="center"></div> </div>
總結：
浮動規則：
如果元素是左（右）浮動 ，則浮動元素的左（右）邊界不能超過包含塊的左（右邊界），而且浮動元素的頂端也不能超過包含塊的頂端及之前所有浮動元素的頂端
浮動元素不能與行內元素內容重疊，行內級內容將會被浮動元素推出（圖文環繞）
浮動元素可以使塊級元素在同一行顯示，進行頁面布局