甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

CSS中Clear:both的使用方法

这篇文章主要为大家分享CSS中Clear:both属性的使用方法。文中还介绍了运用清除浮动的原因、BFC的介绍和布局规则，希望大家通过这篇文章能有所收获。

专注于为中小企业提供网站设计制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业都匀免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

什么是BFC

　要来理解BFC，先介绍一下Box和Formatting Context

Box 是 CSS 布局的对象和基本单位， 简单来说页面就是由Box组成，元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block formatting context；

2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

3、run-in box: css3 中才有， 这儿先不讲了。

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置。

（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

（4）BFC的区域不会与float box重叠。

（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

（6）计算BFC的高度时，浮动元素也参与计算

瞧，最后一条就是我们需要利用的了，我们只需要利用BFC就可以解决浮动后外容器高度塌陷的问题

如何生成BFC

  1. 根元素是BFC模式

这种不能考虑，因为都不是根元素

  1. 设置高度

显然也是不可以的。

  1. float属性不为none

本来就要设置浮动的。所以也不考虑

  1. position为absolute或fixed

这样设置后，就失去浮动的意义了。因此也不使用

  1. display为inline-block, table-cell, table-caption, flex, inline-flex

虽然可以开启，但是导致父元素原有宽度丢失

  1. overflow不为visible

这种方法副作用比较小，但是还是有问题的。比如overflow设置为hidden，这个不行，内容的高度是撑开的宽度也不能确定。设置为scroll，会出现右边和下边的滚动条宽度

设置为auto最合适，不过，如果里面的内容使用了定位，并且超出去就会出现滚动条。所以只能保证内容不能有定位。

Clear:both

清除：两者间，顾名思义就是清除浮动　　CSS中Clear:both的使用方法

　我们看到如果要使用clear:both，就需要给高度塌陷的容器里面最后追加一个div，并且给这个div设置为clear：both，我们发现这种使用方法比较麻烦，每次设置都需要最后增加div。

因此我们做了一个修改

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #div0
        {

            background-color: greenyellow;
        }
        #div1
        {
            width: 100px;
            height: 100px;
            background-color: orange;
            float: left;
        }
        /*在外容器的里面最后添加内容*/
        .clearFloat:after
        {
            content: "";/*添加一个空字符串*/
            display: block;/*设置这个空字符串是一个块，这样会独占一行*/
            height: 0;/*设置这个添加的空字符串的高度是0*/
            visibility: hidden;/*不让这个空字符串显示*/
            clear: both;/*清除浮动*/
        }
        .clearFloat
        {
            zoom: 1;/*IE6以下的浏览器也可以利用这种方式清除浮动*/
        }
    style>
head>
<body>
    <div id="div0" class="clearFloat">
        <div id="div1">div>
    div>
body>
html>

 

关于CSS中Clear:both的使用方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


名称栏目：CSS中Clear:both的使用方法
转载来于：http://chengdu.cdxwcx.cn/article/gghjsj.html

其他资讯