## **浮动 float** **一、浮动元素脱标** 脱标元素**不再区分**块级元素和行内元素。 脱标元素**可以设置**宽高还可以并排显示。 #### **脱标？？？** ### **脱标？？？** ## **脱标？？？** # **脱标？？？** # **~~脱？？？？！！！！！~~** ~~**忒**（tui）~~ 想啥呢？？ 来来来，解释一下哈~ 这玩意儿是**脱离标准文档流**！！ > 标准文档流，类似于word文档。光标位置决定书写位置。元素默认都是在标注文档流中渲染，元素从上到校顺序进行渲染，标准文档流在页面最底层。 > 特点：1、文本内容有空白现象； > 2、文本内容高矮不同、底边对齐效果不同； > 3、文本内容超过盒子宽度时自动换行。 想要脱离标准文档流方式：浮动、绝对定位、固定定位 **二、浮动元素依次贴边显示** 举例：如果一个大盒子之中有四个小盒子，他们是贴边显示的。但当所有子盒子的宽度超过父盒子的宽度会自动换行，掉下来。（会想他的前一个兄弟盒子贴边）   **浮动元素不会钻盒子：**  **浮动元素没有margin垂直方向的塌陷：** 两个浮动元素上下排列，上盒子有一个下margin,下盒子有个上margin，他们之间的和就是两个margin之和。 **浮动元素会让出标准流位置：** 两个同级元素，一个元素浮动，第二个元素设置标准流。浮动元素会让出标准流的位置，视觉上形成压盖的效果。  所以，在使用同级元素的时候，要浮动都浮动。 ## **字围** 浮动元素会让出标准流位置，文字并不会被压盖住，而是现实在浮动元素周围。 ## **浮动虽好，但他也会有很多问题嗷。** 1、浮动元素不能撑高父盒子的高度（高度自适应）， 2、并且浮动的元素会影响后面的浮动元素  ## **解决办法：** 1、直接给父盒子添加height  可以解决浮动元素影响后面元素的问题，但没有解决高度自适应 2、给后面浮动元素父盒子添加clear ``` clear:清除浮动影响 left: 清除左浮动影响 right: 右 both:清除左右浮动影响 ```  解决：浮动元素会影响后面浮动元素 没有解决 高度自适应问题 3、外墙法： 在两个父盒子之间添加一堵“有高度”，“清除浮动”墙  解决：浮动元素会影响后面元素的浮动，在视觉上会有间隔 没有解决高度自适应 4、内墙法 在所有浮动元素后面加一堵墙  解决了所有问题，但是会给页面增加很多无意义标签 5、overflow auto:溢出滚动 当内容超过盒子设置的高度，自动出现滚动条，拉动滚动条可以查看所有内容 hidden：溢出隐藏 当暖戳能超过盒子设置的高度，将超过的部分赢藏掉 设置padding 内容不会背影藏，将边框之外的内容隐藏。 给父盒子设置overflow:hidden，可以解决所有问题  所以： > overflow:hidden有两个引申含义： > 1、强制检测子盒子高度，将检测到的高度自动撑高父盒子（高度自适应） > 2、强制检测浮动子盒子，不会让其影响其他浮动元素 但是：如果盒子内容部内容很多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。 6、使用after伪元素清除浮动 ``` 元素::after { content: ''; -------一定要写 clear: both; -------一定要写 } ``` 伪元素特点：伪元素不属于文档； 所以不会多添加dom元素占用节点。