常见的布局方法以及它们的优缺点
-
Flexbox - 弹性布局
- 优点:css3新特性,简单快捷,目前主流布局方式,解决旧特性定位时产生元素脱离文档流问题。
- 缺点:仅支持 IE9 以上浏览器。
<section class="flex-wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </section>
.flex-wrap { display: flex; /* height: 100px; */ /* 不设置高度则自适应 */ } .flex-wrap .left, .flex-wrap .right { width: 200px; } .flex-wrap .center { flex: 1; }
-
Grid - 网格布局(未来趋势)
- 优点:可将网页划分成不同的网格,任意组合不同布局,可以实现以前只能通过诸如Bootstrapcss第三方框架的布局效果。
- 缺点:css 实验性新特性,在浏览器中还没有得到广泛的支持。
<section class="grid-wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </section>
.grid-wrap { display: grid; grid-template-rows: 100px; /* 设置行高,不设置则自适应 */ grid-template-columns: 200px auto 200px; /* 设置列宽,也可使用百分比 */ }
-
Floats - 浮动布局
- 优点:比较简单,兼容性好;
- 缺点:浮动会使元素脱离文档流,容易出现高度塌陷等问题,需做好清理浮动。
<section class="float-wrap"> <div class="left">left</div> <div class="right">right</div> <div class="center">center</div> <!-- ⚠️注意,没浮动的div应放再最后,left左浮动完后,行剩余空间会被center占满 --> </section>
.float-wrap>div { height: 200px; } .float-wrap .left { float: left; width: 200px; } .float-wrap .right { float: right; width: 200px; }
- 以上方式虽简单,但仅适合所有元素等高的情况,因为元素浮动会脱离文档流,所以不等高可能会出现如下几种状况;
- 未浮动元素高于浮动元素,造成围绕效果。
- 解决方案:未浮动元素创建 BFC,以下是创建BFC的五种方式。
- float 除了none以外的值
- overflow 除了visible 以外的值(hidden,auto,scroll )
- display (table-cell,table-caption,inline-block, flex, inline-flex)
- position值为(absolute,fixed)
- fieldset元素
- Positioning - 定位布局
- 优点:简单直接;
- 缺点:绝对定位同float布局一样会脱离文档流,高度塌陷问题。
<section class="position-wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </section>
.position-wrap>div { position: absolute; } .position-wrap .left { width: 200px; left: 0; } .position-wrap .right { width: 200px; right: 0; } .position-wrap .center { left: 200px; right: 200px; } ```
- 出现高度塌陷问题,可创建BFC来解决,直接给父容器添加 overflow: auto; 或 hidden、scroll等。
.position-wrap { overflow: auto; /* 或 hidden、scroll 等 */ }
-
Table layout - 表格布局
- 优点:兼容性最佳
- 缺点:对 seo 不友好,且列高不能自适应,所有列高会保持一致。(且很少有人使用table布局了)
<section class="table-wrap"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </section>
.table-wrap { display: table; width: 100%; } .table-wrap>div { display: table-cell; } .table-wrap .left, .table-wrap .right { width: 200px; }
-
清除浮动的四种方法(推荐使用前两种,生产环境推荐第二种。)
- 父容器添加 overflow
.container {
overflow: hidden;
/* 或 auto、scroll 等非默认 visible 值*/
}
- 通过伪元素清除浮动
- 通用样式添加 .clearfix 及其伪类样式;
- 给需要清除浮动的元素class添加 clearfix 类;
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:block;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
- 父容器内添加空元素
- 父容器底部添加空元素;
- 添加样式 clear: both;
缺点:增加冗余标签,违背了语义网的原则。
<section>
<div style="float: left">....<div>
...
<div style="clear: both;"></div>
<section>
- 浮动父容器
缺点:影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。