[TOC] ## 定位 浮動 flex grid table ## 1.題目：高度不變 左右寬確定 中間自適應 ### 1.1、float ``` 左浮動右浮動（設置width-height） 加背景顏色區分； 中間會自適應 ``` ### 1.2、定位 `position` ``` 中間 絕對定位absolute{ left：300px；right：300px；} 左右 設置背景顏色 不用管 ``` ### 1.3、flex ``` 中間 自適應 { flex：1 } 父級 display: flex; 左右 設置width-height 加背景顏色區分 ``` ### 1.4、table ``` display：table；width：100%； 父級 >div{ display：table-cell } ``` ### 1.5、gird ``` display：grid；width：100%； grid-template-rows：100px； grid-tempalte-columns：300px auto 300px ``` ## 2、假設height未知那些不能用 > flex和table可以用 > float 不能用 元素高度超出時內容溢出 ## 3、浮動相關 ### 3.1為什么要清除浮動 ``` 主要是為了解決父元素高度坍陷問題。 一個塊級元素如果沒有設置height,其height由子元素撐開，對子元素使用了浮動之后，子元素就會脫離文檔流。那么父元素中沒有內容撐開其高度，這樣父元素的height就會被忽略。 ``` ### 3.2 如何清除 ``` 1、父元素設置overflow: hidden(少用) 2、clearfix：使用內容生成的方式清除浮動，不會破壞文檔流。 .clearfix: after { // :after選擇器向選定的元素之后插入內容 content:""; // 生成內容為空 display: block; // 塊級元素顯示 clear:both; // 清除前面元素 } ```