精品网站开发公司,wordpress 评论 倒序,网络营销组织是什么,如何建立淘宝客网站BFC#xff0c;Block Formatting Context#xff0c;块级格式化上下文#xff0c;是一个独立的渲染区域或隔离的独立容器#xff0c;它决定了其子元素如何布局#xff0c;并且与这个区域外部的元素无关。
形成 BFC 的条件
float 的值不为 none#xff08;left、rightBlock Formatting Context块级格式化上下文是一个独立的渲染区域或隔离的独立容器它决定了其子元素如何布局并且与这个区域外部的元素无关。
形成 BFC 的条件
float 的值不为 noneleft、rightoverflow 的值不为 visiblehidden、auto、scrolldisplay 的值为 table-cell、table-caption、inline-block、flex、inline-flexposition 的值为 absolute 或 fixedhtml 根元素
BFC 的特性
内部的 Box 会在垂直方向一个接一个的放置。即使存在浮动也是如此。Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠。BFC 的区域不会与 float box 重叠定位情况除外。BFC 是一个页面上的独立容器容器里面的子元素不会影响到外面的元素反之亦然。计算 BFC 的高度时浮动元素也参与计算。
BFC 可以解决的问题
解决浮动导致的父元素高度塌陷问题
问题当父元素没有设置固定高度且子元素都浮动时父元素会出现高度塌陷。
htmlstyle.container {width: 300px;border: 1px solid red;/* overflow: hidden; */}.item {background-color:orange;float: left;width: 100px;height: 100px; }/stylebodydiv classcontainerdiv classitem/div/div/body
/html解决方案父元素样式增加 overflow: hidden;
最终效果 解决外边距合并问题
问题普通文档流中处于同一个 BFC 中的块级元素之间的垂直外边距会发生外边距合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
htmlstyle.item1, .item2 {background-color:orange;width: 100px;height: 100px; }.item1 {margin-bottom: 70px;}.item2 {margin-top: 30px;}/stylebodydiv classcontainerdiv classitem1/divdiv classitem2/div/div/body
/html此时两个盒子之间的垂直间距等于最大的外边距 70而不是两个外边距之和 100。
解决方案任意选择一个子元素创建 BFC如 box
htmlstyle.item1, .item2 {background-color:orange;width: 100px;height: 100px; }.item1 {margin-bottom: 70px;}.item2 {margin-top: 30px;}.box {overflow: hidden;}/stylebodydiv classcontainerdiv classitem1/divdiv classboxdiv classitem2/div/div/div/body
/html最终效果 3. 解决文字环绕问题 / 实现两栏布局
问题正常情况下左侧元素浮动时会与右侧元素重叠形成文字环绕效果从而无法实现两栏布局。
htmlstyle.container {width: 300px;}.item1 {background-color:orange;width: 100px;height: 100px;float: left; }.item2 {background-color: #d0e4fe;}/stylebodydiv classcontainerdiv classitem1左侧浮动元素/divdiv classitem2右侧非浮动元素会环绕在浮动元素的右侧达到文字环绕的效果。父元素的高度取决于右侧内容的高度。如果右侧内容较少会造成父元素高度塌陷如果右侧内容足够多则会继续填充到浮动元素的下方。/div/div/body
/html解决方案给右侧元素设置 overflow: hidden; 来形成 BFC。
最终效果
