CSS实战笔记(九) BFC

简介: CSS实战笔记(九) BFC

正文


1、基本介绍


BFC(Block Formatting Context)的中文名称是块级格式化上下文,它是一个独立渲染的区域


在这个区域的内部有自己的布局规则,内部的元素对外部的元素没有任何影响,反之亦然


2、布局规则


BFC 的内部元素都必须是块级盒子,并且这些盒子有一定的布局规则,具体如下:


  • 盒子在垂直方向上一个接着一个放置
  • 相邻盒子在垂直方向上的距离由 margin 决定,属于同一个 BFC 的两个相邻盒子会发生 margin 重叠的情况
  • 每个盒子的左外边距与容器的左边界相接触,即使它是浮动盒子也是如此
  • BFC 的区域不会与浮动盒子重叠
  • BFC 的高度计算要包含浮动盒子


3、创建方式


创建一个 BFC 的方法有很多,下面来介绍比较常用的几种:


  • 根元素本来就是一个 BFC
  • 设置 float 属性的值不为 none
  • 设置 overflow 属性的值不为 visible
  • 设置 position 属性的值为 absolute 或 fixed
  • 设置 display 属性的值为 flow-root、inline-box、flex 等


4、应用实例


(1)解决高度塌陷的问题

如果我们没有显式设置父元素的高度,并将子元素设置为浮动的,那么父元素就会出现高度塌陷

<!DOCTYPE html>
<html>
<head>
    <style>
        .father {
            border: 1px solid red;
            width: 300px;
        }
        .son {
            border: 1px solid blue;
            width: 100px;
            height: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>


b2523f40a69337fb2aa00271a5491eec_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbXJ6eA==,size_16,color_FFFFFF,t_70#pic_center.jpg


清除浮动,意思就是清除由于子元素浮动导致父元素高度塌陷的影响,清除浮动有两个基本的思路

  • 在父元素的最后加一个冗余元素,并给这个元素设置 clear:both
.father {
    border: 1px solid red;
    width: 300px;
}
.father::after { /* 关键 */
    content: '';
    display: table;
    clear: both;
}
.son {
    border: 1px solid blue;
    width: 100px;
    height: 80px;
    float: left;
}


  • 将父元素设置为 BFC,因为 BFC 的高度计算要包含浮动元素
.father {
    border: 1px solid red;
    width: 300px;
    display: flow-root; /* 关键 */
}
.son {
    border: 1px solid blue;
    width: 100px;
    height: 80px;
    float: left;
}


be63fc709760e83efd90194091c2a3d2_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbXJ6eA==,size_16,color_FFFFFF,t_70#pic_center.jpg

(2)解决外边距塌陷的问题

属于同一个 BFC 的两个相邻盒子会发生外边距塌陷的情况

<!DOCTYPE html>
<html>
<head>
    <style>
        .elder-brother {
            width: 100px;
            height: 80px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        .little-brother {
            width: 100px;
            height: 80px;
            border: 1px solid blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="elder-brother"></div>
    <div class="little-brother"></div>
</body>
</html>


580123a90a460edf83b34f7c0448ce24_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbXJ6eA==,size_16,color_FFFFFF,t_70#pic_center.jpg

解决方法就是给其中一个元素包一个 BFC,这样就能使得两个元素不在同一个 BFC 中

<!DOCTYPE html>
<html>
<head>
    <style>
        .elder-brother {
            width: 100px;
            height: 80px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        .wrapper {  /* 关键 */
            display: flow-root;
        }
        .little-brother {
            width: 100px;
            height: 80px;
            border: 1px solid blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="elder-brother"></div>
    <div class="wrapper"><div class="little-brother"></div></div>
</body>
</html>


b5abbb17ab0fedb13cbacb461a6b0c9b_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbXJ6eA==,size_16,color_FFFFFF,t_70#pic_center.jpg


目录
相关文章
|
1天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
9 2
|
1天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
13 3
|
1天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
14 2
|
29天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
29天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
29天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
29天前
|
编解码 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站,运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页,设计简洁易用,包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性,色彩搭配选用冷色调为主,辅以亮色点缀。字体选择清晰易读,布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南,为进一步功能扩展和优化打下基础。
|
29天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
29天前
|
前端开发 测试技术 定位技术
【专栏:HTML 与 CSS 实战项目篇】构建一个企业级网站:HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤,包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计,创建现代、简洁的网站,包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码,确保性能,助力企业在数字时代树立良好形象并提升沟通效率。
|
29天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。