[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; // 清除前面元素 } ```