html/css系列 BFC

Elle 发布于2019-08-02 10:39 / 2141人阅读

摘要：本文详情第一种中的盒子对齐创建一个环境第二种外边距折叠垂直方向上的距离由决定上下同时造成重叠第二种因为浮动造成盒子对齐解决方法相隔的换成标签第三种左边浮动右边自适应第四种文字环绕解决方法清除浮动

本文详情:https://www.cnblogs.com/chen-...

第一种 BFC中的盒子对齐

        div {
                height: 20px;
        }
            
        .container {
            position: absolute;  /* 创建一个BFC环境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

第二种外边距折叠垂直方向上的距离由margin决定

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

上下DIV同时margin 造成重叠

第二种BFC,因为浮动造成盒子对齐解决方法相隔的DIV换成P标签

第三种DBC 左边浮动右边自适应

第四种DFC 文字环绕解决方法verflow:hidden清除浮动

GPU云服务器云服务器 bfc bfc布局 html css HTML+CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52496.html

html/css系列 BFC

摘要：本文详情第一种中的盒子对齐创建一个环境第二种外边距折叠垂直方向上的距离由决定上下同时造成重叠第二种因为浮动造成盒子对齐解决方法相隔的换成标签第三种左边浮动右边自适应第四种文字环绕解决方法清除浮动本文详情:https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 showImg(https://segmentfault.com/img/bVbb0q...

joyqi 2019-08-29 15:40 评论0 收藏0
Web开发系列【1】实用的网页布局（PC端）

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

Andrman 2019-08-02 16:05 评论0 收藏0
Web开发系列【1】实用的网页布局（PC端）

摘要：利用左侧浮动，右侧盒子通过形成了。三列布局这是比较复杂的布局，适合有复杂操作功能的网页，如各大电商网站。建议升级您的浏览器，或使用等高级浏览器，将会得到更好的体验在熟悉那些常用的软件、工具后，我们正式开始开发，在前期准备工作之后，我们要做的事情是写页面，也就是网页布局。在w3c、菜鸟、慕课网等等网站上都有基础的 HTML+CSS 知识讲解，在初期学习中，跟着教程全部过一遍就差不多了。...

jerryloveemily 2019-08-29 16:44 评论0 收藏0
bfc初探

摘要：初探什么是全称是块级格式化上下文，是可视化渲染的一部分，它是块级盒子的布局发生，浮动互相交互的部分。可以把父元素设置成这样可以使这个元素包含其浮动子元素。而浮动元素本身是脱离文档流的，非元素的高度计算是不会把浮动元素计算在内。 bfc初探什么是bfc bfc全称是块级格式化上下文（block formating context），是web可视化css渲染的一部分，它是块级盒子的布局发...

yzd 2019-08-29 12:55 评论0 收藏0
前端面试题-BFC(块格式化上下文)

摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。一、BFC 的概念 1.规范解释块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...

Ryan_Li 2019-08-30 14:06 评论0 收藏0