HTML+CSS基础之浮动
雷迪森and乡亲们,大家好,我是白Pro,今天给大家说一个html基础知识——浮动。
首先我们来看一下浮动的定义
浮动定义:
使元素脱离文档流且块级元素在同一行显示(文档流:元素在页面中所占的位置)
浮动一般情况
当第一个div左浮动以后,后面一个div也会直到遇到前面这个同级浮动元素就会停下来
浮动特殊情况:
1. 当两个盒子,我只给第一个盒子浮动的时候,假如后面宽度和第一个盒子宽度一致,那么就会被第一个盒子盖住
2. 父盒子宽度不够浮动元素掉下去以后会照样执行浮动命令
我们可以看到整个父盒子宽度520px;当我们们两个div盒子加起来宽度已经超出了父盒子宽度时候,盒子就会掉下俩,但是我们给了box2一个右浮动他虽然掉下来了还是会执行浮动命令。
任何元素都支持浮动
行内元素浮动以后支持宽高,但是并不等于转为块级元素
浮动对文字的影响:文字会环绕浮动元素 不会被盖住
浮动和inline-block区别
共同点:
- 块级元素在同一行显示;
- 支持宽高;
- 支持margin;
- 没设置宽度时候默认内容撑开宽度;
- 支持margin:auto
不同点:
浮动脱离文档流
inline-block:标签之间会被空格解析
清除浮动
可能你们会问,既然要清除浮动为什么还要给他浮动,因为不清除浮动会造成父级元素塌陷因为脱离了文档流,不会被内容撑开高度
清除浮动方式:
给父级加高度
弊端:一般在布局中都是由高度撑开,不会固定高度。
在子级最后添加空标签
弊端:ul ol dl 不适用,因为他们之间不能嵌套其他标签
overflow:hidden清除
伪元素清除浮动(时下主流)
好了本期小基础就到这里了,不知道有没有看懂呢没看懂的可以在下方留言哦!