关于浮动,一直存在一些误解
一,浮动是什么
首先需要了解下文档流,普通文档流中,元素是按照从上到下,从左到右的顺序进行排列的;在这个排列的过程中,又会存在行内元素和块级元素,它决定了元素是否独立占据一行。
float元素是是指定一个元素沿着容器的左侧或右侧放置,准许
文本
或者内联元素
环绕它。该元素从正常文档流中删除,尽管保持部分流动性。 (MDN)
二,简单的方法理解浮动
块级元素
块级元素中的子元素仍然遵循环绕性
<div class="wrapper">
<div class="child1">浮动元素</div>
<div class="child2">
<div class="child2-inner">普通块级元素内部内(。。。省略300字)</div>
</div>
</div>
.wrapper {
border: 1px solid green;
.child1 {
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
.child2 {
background: yellow;
.child2-inner {
border: 1px solid blue;
}
}
}
111.png
== haha ==
网友评论