引子
CSS的4大核心是"盒子模型, 普通文档流, 浮动, 定位".
刚开始学CSS的浮动时, 很困惑:
- "块级元素"设置成浮动后, 为什么不再占据一行?
- "行内元素"是否可以浮动? 什么表现?
"块级元素"设置成浮动后, 为什么不再占据一行?
在"普通文档流"中, "块级元素"默认会占据一行
如果"块级元素"设置了浮动, 就会脱离"普通文档流"进入"浮动层", 称为"浮动元素"; 而"浮动元素"的一个重要特性是倾向于自动收缩, 以包裹住子元素.
所以, "块级元素"设置成float之后, 如果没有指定宽高，它会自动收缩, 并始终包裹住子元素。不会像在"普通文档流"中一样独占一行
"行内元素"是否可以浮动? 什么表现?
测试:
<style>
*{
margin:0;
padding:0;
}
.firstSpan{
float:left;
width:200px;
height:50px;
border:1px solid #eee;
}
.secondSpan{
float:right;
width:200px;
height:50px;
border:1px solid #eee;
}
p{
border:1px solid #000;
}
</style>
</head>
<body>
<h3>测试一下行内元素是否可以浮动</h3>
<span class="firstSpan">这是第一个行内元素</span>
<p>这是第1个块级元素</p>
<span class="secondSpan">这是第二个行内元素</span>
<p>这是第2个块级元素</p>
</body>
最后布局效果:
可以看出:
- 行内元素可以设置浮动;
- 当"行内元素"设置浮动float时, 可以设置宽高;
总结
从使用角度上, 我们可以把元素分为"行内元素","块级元素"和"浮动元素"(不严谨,不过方便记忆和使用):
- 只要"行内元素"和"块级元素",设置浮动, 就可以定义为"浮动元素";
- "浮动元素"的特点: 不管之前是"行内元素"还是"块级元素", 设置浮动之后, 表现都是一样的 -- 可以设置宽高, 但是如果没有指定宽高，它就会自动收缩包裹住子元素, 而且不会占据一行;
文章历史
- 2016/10/28 (第一次发布)
如果你觉得我的文章对你有用, 请打个"喜欢", 或者给些改进的建议 _
