CSS 消除波动与BFC的方式

日期:2020-12-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

BFC

BFC:块级文件格式化左右文

BFC的合理布局标准

  • 內部的Box会在竖直方位,1个接1个地置放。
  • Box竖直方位的间距由margin决策。属于同1个BFC的两个邻近Box的margin会产生重合。
  • 测算BFC的高宽比时,波动元素也参加测算。
  • BFC的地区不容易与float box重合。
  • 每一个盒子(块盒与行盒)的margin box的左侧,与包括块border box的左侧相触碰(针对从左往右的文件格式化,不然相反)。即便存在波动也是这般。
  • BFC便是网页页面上的1个防护的单独器皿,器皿里边的子元素不容易危害到外面的元素。反之也这般。 

怎样建立BFC

1、 float 的值并不是 none 。

2、 position 的值并不是 static 或 relative 。

3、 display 的值是 inline-block 、 table-cell 、 flex 、 table-caption 或 inline-flex
4、 overflow 的值并不是 visible

BFC的功效

1.运用BFC防止margin重合。

2.自融入两栏合理布局

3.消除波动。

消除波动

消除波动关键是以便处理,父元素由于子级元素波动引发的內部高宽比为0的难题。

消除波动的方式

1. 附加标识法

在最终1个波动标识后,新加1个标识,给其设定clear:both;(不强烈推荐)

优势:通俗化易懂,便捷

缺陷:加上不经意义标识,词义化差

<style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clear"></div>
</div>
<div class="div2"></div>
</body>

2.父级加上overflow特性

根据开启BFC方法,完成消除波动。(不强烈推荐)

优势:编码简约

缺陷:內容增多的情况下非常容易导致不容易全自动换行致使內容被掩藏掉,没法显示信息要外溢的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

3.应用after伪元素消除波动(强烈推荐应用)

优势:合乎闭合波动观念,构造词义化正确。

缺陷:ie6⑺不适用伪元素:after,应用zoom:1开启hasLayout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clearfix:after {
            content: ""; /*內容为空*/
            display: block; /*变换为块级元素*/
            height: 0; /*高宽比为0*/
            clear: both; /*消除波动*/
            visibility: hidden; /*掩藏盒子*/
        }
        .clearfix {
            *zoom: 1; /*IE6\7的解决方法*/
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

4.应用before和after双伪元素消除波动

优势:不但能够消除波动,还可以处理高宽比塌陷的难题(给父盒子加上类名clearfix)

缺陷:用zoom:1开启hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: orangered;
        }
        .clearfix:after, .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

总结

到此这篇有关CSS 消除波动、BFC的文章内容就详细介绍到这了,更多有关css 波动 BFC內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!