css中的bfc怎么玩？_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

css中的bfc怎么玩？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

首先弄明白一个概念，上面是bfc？
w3c是这样解释

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。

说通俗一点就是：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style> .column{ width: 31.33%; background-color: aqua; float: left; margin: 0.1%; color: #fff; padding: 10px 0; } .column:last-child{ float: none; /* overflow: hidden;*/ } </style></head><body>    <div class="container">        <div class="column">11</div>        <div class="column">22</div>        <div class="column">33</div>    </div></body></html>

登录后复制

上面的代码添加了overflow：hidden所以会形成一个新的bfc模块。

理解了概念对于很多布局都追根问底，明白其中的原理，比如什么计算margin边距上下取大左右取大。什么左边头像右边文字之类的布局等等。

更多详细介绍见：http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7350

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，