关于浮动布局、BFC、清除浮动

浮动布局是CSS的基础知识点之一,稍微学过前端的人都知道也都能使用。但是要说真的往详细了问,却发现对float的了解并没有自己想的那么深。特此总结一下我自己对float的一些盲区。

例子:三列布局使用浮动

这个例子我在上一篇的常见布局中有写,先搬过来

  • 浮动定位实现
<div class="h150 three-column-float">
    <div class="left">此方法为</div>
    <div class="right">浮动定位实现</div>
    <div class="center">
        三列布局
    </div>
</div>
.three-column-float .left {
    float: left;
    width: 150px;
    height: 100%;
}

.three-column-float .right {
    float: right;
    width: 250px;
    height: 100%;
}

.three-column-float .center {
    margin-right: 250px;
    margin-left: 150px;
    height: 100%;
}

/*注意 为了避免换行 html中left和right放在center前*/

此时效果如下:

浮动1.png

这里需要一提的是,为什么要在center中加入左右外边距呢?一些新手会问,浮动不是会把旁边的内容“顶”到旁边去吗?

并不完全是这样,浮动定义中,HTML端定义在浮动元素下面的块元素将无视浮动元素,仿佛HTML流内被浮动起来的元素消失了一样。但内联元素(如块元素内的文本)将像流水一样围绕着浮动元素。

我们来对上面的例子做一个修改,删去center中的margin-left和margin-right,然后在center中加入一个div白色块。

<div class="h150 three-column-float">
    <div class="left">此方法为</div>
    <div class="right">浮动定位实现</div>
    <div class="center">
        三列布局
        <div class="center-div"></div>
    </div>
</div>
.three-column-float .center {
    /*margin-right: 250px;*/
    /*margin-left: 150px;*/
    height: 100%;
}

.three-column-float .center-div {
    width: 50px;
    height: 50px;
    background: #fff;
}

可以发现,效果和没有更改的是一样的!问题在哪里?打开控制台找到center-div,显示如下图:

浮动2.png

这个div并没有因为浮动元素而自动变换位置,而是出现在“原本的位置”上。
那么我们将center-div改为行内块试试:

.three-column-float .center-div {
    width: 50px;
    height: 50px;
    background: #fff;
    display: inline-block;
}

浮动3.png

白块出现了,这证明了浮动对旁边块的影响只会是其行内块。并且如果行内块有字的话会有更多的影响,我们在center-div中加入“哟哟”俩字:

  • 未设置inline-block
    浮动4.png
  • 设置了inline-block
    浮动5.png

很明显问题很大,如果没有字,那么不会自动根据块元素的特性自动放置在下一行中,而如果有字,还另外需要设置vertical-align来进行对其排版。关于vertical-align我之后会再针对性的写一遍总结(立个flag先)

所以这里我们需要设置外边距以避免这种情况。

还有什么其他办法?这就是下面要说的BFC。

  • 浮动+BFC
<div class="h150 three-column-float-bfc">
    <div class="left">此方法为</div>
    <div class="right">浮动+BFC实现</div>
    <div class="center">三列布局</div>
</div>
.three-column-float-bfc .left {
    float: left;
    width: 150px;
    height: 100%;
}

.three-column-float-bfc .right {
    float: right;
    width: 250px;
    height: 100%;
}

.three-column-float-bfc .center {
    overflow: hidden;
    height: 100%;
}

效果和设置了外边距是一样的。什么是BFC呢?
BFC的教程一抓一大把,这里先贴一个一半一半前辈的教程——理解CSS中BFC

简单来说,BFC(Block Formatting Context),原理就是块级格式化上下文。

原理的话就是,BFC是一个独立的容器,外面的元素和里面的元素不会相互影响。

形成BFC的方式:

  • float的值不为none
  • position的值不为static或者relative
  • display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
  • overflow的值不为visible

具体应用:

  • 防止margin重叠(详细的margin重叠看上面的链接吧,写得很详细。将相邻的两个元素放在不同的BFC中,或者一个放在BFC中,使其不在同一个BFC中。因为同一个BFC中的相邻元素margin会重叠)
  • 计算BFC的高度是浮动子元素也会参与计算,当然为了计算包含浮动子元素的父容器高度时通常也会采用clear浮动方式
  • 多栏布局是不会与浮动元素覆盖(将非浮动栏设置为BFC)。如下图:
    浮动6.png

关于BFC其他的也就不写了,主要是太详细的都在上面链接中了(掩面),以证明个人学习过程及以后复习,放张自己之前的笔记(丑字)
浮动7.JPG

最后再讲一下清除浮动

关于清除浮动

为什么要清除浮动:

  1. 背景不能显示:
    由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
  2. 边框不能撑开:
    如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
  3. margin padding设置值不能正确显示:
    由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
  4. 浮动元素过长,导致影响到了其他元素,如将之前的三列布局如下设置:
.three-column-float .left {
    float: left;
    width: 150px;
    height: 150%;
}

.three-column-float .right {
    float: right;
    width: 250px;
    height: 150%;
}

.three-column-float .center {
    margin-right: 250px;
    margin-left: 150px;
    height: 100%;
}

效果是这样的,我们可以看到,由于两边浮动元素过长,影响到了下面使用浮动+BFC的布局的查看。

浮动8.png

我们可以直接对下面的容器设置一个clear: both来清除浮动,使元素周围不能有浮动元素。
浮动9.png

而通常使用的为了解决前三种问题的方式是使用如下两种方法:
例子:

<div class="float">
    <div class="ll"></div>
    <div class="rr"></div>
</div>
.float {
    background: #aaa;
}

.ll {
    float: left;
    width: 150px;
    height: 300px;
    background: red;
}

.rr {
    float: right;
    width: 150px;
    height: 300px;
    background: blue;
}

可以看到没有撑开容器
浮动10.png

  • 方法一
.clear{clear: both; height: 0; overflow: hidden;}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

<div class="float">
    <div class="ll"></div>
    <div class="rr"></div>
    <div class="clear"></div>
</div>
  • 方法二(推荐):
.clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix{*+height: 1%;}  //ie兼容

用法很简单,在浮动元素的父云素上添加class="clearfix"。

<div class="float clearfix">
    <div class="ll"></div>
    <div class="rr"></div>
</div>

效果如下:
pic11

 websocket基础使用与实例
CSS中几种常见布局的实现方式 
上一篇:websocket基础使用与实例
下一篇:CSS中几种常见布局的实现方式


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ