HTML+CSS基础之浮动

雷迪森and乡亲们，大家好，我是白Pro，今天给大家说一个html基础知识——浮动。

首先我们来看一下浮动的定义

浮动定义：

使元素脱离文档流且块级元素在同一行显示（文档流：元素在页面中所占的位置）

浮动一般情况

当第一个div左浮动以后，后面一个div也会直到遇到前面这个同级浮动元素就会停下来

浮动特殊情况：

1. 当两个盒子，我只给第一个盒子浮动的时候，假如后面宽度和第一个盒子宽度一致，那么就会被第一个盒子盖住

2. 父盒子宽度不够浮动元素掉下去以后会照样执行浮动命令

我们可以看到整个父盒子宽度520px；当我们们两个div盒子加起来宽度已经超出了父盒子宽度时候，盒子就会掉下俩，但是我们给了box2一个右浮动他虽然掉下来了还是会执行浮动命令。

任何元素都支持浮动

行内元素浮动以后支持宽高，但是并不等于转为块级元素

浮动对文字的影响：文字会环绕浮动元素  不会被盖住

浮动和inline-block区别

共同点：

1. 块级元素在同一行显示；
2. 支持宽高；
3. 支持margin；
4. 没设置宽度时候默认内容撑开宽度；
5. 支持margin：auto
   

不同点：

浮动脱离文档流

inline-block：标签之间会被空格解析

清除浮动

可能你们会问，既然要清除浮动为什么还要给他浮动，因为不清除浮动会造成父级元素塌陷因为脱离了文档流，不会被内容撑开高度

清除浮动方式：

给父级加高度

弊端：一般在布局中都是由高度撑开，不会固定高度。

在子级最后添加空标签

弊端：ul ol dl 不适用，因为他们之间不能嵌套其他标签

overflow：hidden清除

伪元素清除浮动（时下主流）

好了本期小基础就到这里了，不知道有没有看懂呢没看懂的可以在下方留言哦！