前端基础学习笔记浮动清除浮动怪异盒模型

本是古典何须时尚 2022-04-16 05:43 230阅读 0赞

## 文档流 ##

文档流为元素没有改变特性时原本所要排列的位置和规则：  
文档流为**最底层**  
块级 独占一行等在最底层排列，依次往下排列。

**给上浮动之后，会把元素堆积起来，不占文档流的位置。**  
**浮动 可以让元素脱离文档流。**

## 浮动元素 ##

浮动元素在文档流内不占位置，后面的文档流元素，就会占住浮动元素原来的位置。但是文字不会藏在浮动元素下面，因为一开始浮动元素出来的目的是为了做出图文环绕的效果。浮动对文字的影响：**文字会环绕浮动元素。**  
但是浮动元素在同一层，同样为浮动元素会展示出相邻的效果，不是覆盖。

作用：  
让元素既能布局，又能横排显示。

## 浮动元素特性 ##

任何元素，不管是块级元素还是行内元素，只要是给了浮动，就含有以下浮动特性：  
**一、浮动元素不占文档流的位置。**  
**二、浮动元素可以和浮动元素横排显示。**  
**三、支持宽高。**  
**四、支持`margin`和`padding`，不支持`margin auto`。**

和行内块的区别：  
1、不会解析空格。  
2、不会存在垂直对齐问题。  
3、脱离文档流。

## **遇到的情况** ##

**一、父级宽度不够，浮动元素掉下来**  
要么增大父级盒子宽度，要么缩小浮动元素宽度。  
**二、浮动元素被卡住**  
1、上一行的浮动元素`height`过高。  
2、上一行的浮动元素`margin-top`或者`margin-bottom`过多，用`hover`的时候会被卡住，所以尽量`hover`不用`margin-top`。

## 清除浮动带来的问题 ##

浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。  
**浮动元素本身不能清除浮动。**  
**清除浮动对于父级造成的高度塌陷的问题：**  
1、给父级设置固定高度（不灵活，一般是由内容撑开。）  
2、给父级来`overflow:hidden;`，溢出隐藏，会检测到子级的内容，并把子级包裹。  
3、给父级的内容最后添加一个空的块级标签。例如在`div`标签下添加`h1`标签：

h1{
        clear:both;//清除浮动防止父级高度塌陷。
    }

但是不适合ul li这种严格的父子级标签，缺点是造成代码冗余添加了无用的空标签。  
4、给父级添加一个`display:inline-block;`，但是不要使用，因为会产生解析空格和基线对齐的问题。  
5、如果父级是浮动元素的话，那么高度不会塌陷，但是要给父级的父级清除浮动。  
6、伪元素 通过CSS创建的一个没有名字的行内元素，一般是装小图标做小东西。  
`:before` 在内容之前添加伪元素。  
`:after` 在内容之后添加伪元素。  
例

div:before{
    content:"hello";
    }

清除浮动，给父级最后添加伪元素：  
给页面内所有浮动元素都添加上`class=clearfix`，这是清除浮动的**终极方法**。

.clearfix:after{
        display:block;//创建块级标签，如方法3
        content:"";//让块级标签内容为空。
        clear:both;//清除浮动。
    }

低版本ie需要加上：

.clearfix{
        zoom:1;
    }

## 怪异盒模型 ##

**一般在移动端里使用居多。**

标准和模型里 width和height是内容区域的宽高。  
整个盒子的实际大小就是**内容区域+padding+border**

转化为怪异盒模型：

box-sizing:border-box;

怪异盒模型里，width和height是整个盒子的大小。  
内容区域的大小=**width\*height-padding-border**