五种前端基本布局---table布局、float布局、absolute布局、flexbox布局、grid布局
float布局特性
float 属性定义元素往哪个方向浮动。
-
图文环绕效果
float元素脱离了文档流,但是不脱离文本流
文字环绕效果是很明显的,这里要注意一个地方:浮动的块虽然脱离的正常的文档流,但是还会占有正常文档流的文本空间,上图中,p的区域其实是顶到了img的底下的,因为float让img脱离文档流,但是p上的文字却没有顶过去,也就是说p上的一部分文字空间仍然被img占据着,所以从这里也可以看出float的脱离文档流不是完全脱离。 -
对自身的影响:形成“块”(BFC–块格式化上下文)
.位置尽量靠上
.位置尽量靠左(右)
(1) 两个float元素宽度之和刚好等于父级元素宽度、以及所有子级元素宽度之和大于父级元素宽度的情况:
<body>
<div style="background: red; width: 400px;">
<span>写几个字</span>
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
</div>
</body>
<body>
<div style="background: red; width: 400px;">
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
<span>写几个字</span>
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
</div>
</body>
上面的两个代码块运行后的结果是一样的,结果如下:
<body>
<div style="background: red; width: 400px;">
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
<span style="background: green; float: left; width: 200px; height: 50px;">
float
</span>
<span>写几个字</span>
</div>
</body>
结果如下:
(2)所有子级元素宽度之和小于父级元素宽度的情况:(所有情况的结果都一样)
<body>
<div style="background: red; width: 400px;">
<span style="background: green; float: left; width: 150px; height: 50px;">
float
</span>
<span style="background: green; float: left; width: 150px; height: 50px;">
float
</span>
<span>写几个字</span>
</div>
</body>
-
对兄弟元素的影响
.上面贴非float元素(一般float元素上面贴的都是非float元素)
.旁边贴float元素(靠左,或者靠右的时候贴float元素)
.不影响其它块级元素位置
.影响其它块级元素内部文本(三四两点就是特性一说的脱离文档流,不脱离文本流) -
对父级元素的影响
.从布局上“消失”(相当于从父级的空间里面消失了,消失了意味着父级不会再管他的宽高)
.高度塌陷(因为在父级的空间里消失了,所以父级的高度有可能会塌陷,防止父级的高度塌陷的办法就是设置父级属性:overflow)
我们看到float元素的宽高是有100像素的,但是main的高度却是0,没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow,创建一个BFC。
- float 的两栏布局和三栏布局
<body>
<div style="width: 800px;height: 200px;">
<div style="float: left;background: red;width: 200px;height: 100%;">
左
</div>
<div style="background: blue;margin-left: 200px;height: 100%;padding-left: 10px;">
右
</div>
</div>
</body>
<body>
<div style="width:800px;height:200px;">
<div style="float:left;background:red;width:200px;height:100%;">
左
</div>
<div style="float:right;background:blue;width:200px;height:100%;">
右
</div>
<div style="background:yellow;height:100%;">
中
</div>
</div>
</body>
注意:如果给非float元素加上宽度,一定要记得给此元素加上margin-left/right属性,否侧会出现下面的情况(非float元素会被float元素覆盖住一部份)。
<body>
<div style="width:800px;height:200px;">
<div style="float:left;background:red;width:200px;height:100%;">
左
</div>
<div style="float:right;background:blue;width:200px;height:100%;">
右
</div>
<div style="background:yellow;width:400px;height:100%;">
中
</div>
</div>
</body>
正确代码应该是:
<body>
<div style="width:800px;height:200px;">
<div style="float:left;background:red;width:200px;height:100%;">
左
</div>
<div style="float:right;background:blue;width:200px;height:100%;">
右
</div>
<div style="background:yellow;width:400px;margin-left: 200px;height:100%;">
中
</div>
</div>
</body>
float布局的优缺点
缺点
脱离文档流,需要清楚浮动,*高度塌陷(float的破坏性主要是指它会使父容器的高度塌陷,也就是父元素在对高度计算的时候会忽略浮动的元素)。
优点
兼容性好,比较简单