《Web前端开发项目教程》网页的蓝图--简单布局--使用BFC隔离空间.pptxVIP

网页的蓝图—简单布局使用BFC隔离空间

BFC布局知识点理解垂直外边距合并的原理掌握BFC布局的触发方法掌握BFC布局解决外边距合并的方法技能点能够熟练应用BFC解决外边距合并的问题能够使用BFC解决其他实际问题

一、垂直外边距的合并标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。块级元素的垂直margin合并

一、垂直外边距的合并标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。嵌套盒子的垂直margin合并

二、BFC布局——规则BFC（BlockFormattingContext），块级格式化上下文。它是一个独立的渲染区域，决定了块级元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。（1）同一个BFC内的两个相邻块级元素的外边距合并，但不同?BFC外边距不合并；（2）BFC的区域不会与外部浮动元素重叠；（3）计算BFC高度的时候，浮动元素也会参与计算；（4）BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。

二、BFC布局——触发BFCBFC就是让元素形成一个独立的空间，空间内的元素不会影响到外面，那么如何才能让元素形成这样一个空间呢？为元素设置CSS属性。常用的触发BFC方法：（1）设置包含块overflow属性值为hidden；（3）设置子元素display属性值为:inline-block；

BFC解决外边距合并问题styletype=text/css*{padding:0;margin:0;}.parent{ width:400px; background-color:#ff0; }.child1{ width:400px; height:100px; background-color:red; margin-bottom:40px; margin-top:30px;}.child2{ width:400px; height:100px; background-color:blue; margin-top:20px;}/stylebodydivclass=parent divclass=child1/div divclass=child2/div/div/body？？父级盒子.parent和子盒子.child1的上边距发生了合并，而两个子盒子.child1的下边距和.child2的上边距也发生了合并

解决方案1.使用overflow属性触发BFC。做一个独立的区块div包裹子元素child1，设置包裹元素div的overflow属性值hidden或者auto，包裹元素会被子元素撑开，高度就是子元素的高度；css部分代码如下：.box{overflow:hidden; }html部分代码如下：body divclass=parent divclass=box divclass=child1/div /div divclass=child2/div /div/body由于.child1盒子同时和父级盒子以及同级的盒子都发生了垂直外边距的合并，所以使用overflow属性将.child1盒子触发成独立的BFC，合并就不会再发生了。

解决方案2.使用display属性值触发BFC。为子元素child1添加样式属性，如下：.child1{ width:400px; height:100px; background-color:red; margin-bottom:40px; margin-top:30px; display:inline-block;}BFC布局不仅仅可以解决垂直外边距合并的问题，还可以解决子元素浮动之后父元素塌陷的问题、浮动元素与其他元素重叠的问题。30px60px

实训任务BFC经常用于页面布局，请根据以下布局要求完成如图2-4-5所示单栏布局。要求：页面分为三大版块，他们之间垂直距离设置大一些，为20px，主体部分内部有三个小版块，他们之间垂直距离小一点，设为10px。思路：使用BFC布局隔离，版块之间不会发生垂直外边距合并。