知了堂学习笔记清除浮动float的几种办法

Posted biji123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了知了堂学习笔记清除浮动float的几种办法相关的知识,希望对你有一定的参考价值。

  关于浮动问题,我相信大家很容易遇到,比如说头部的导航栏的制作,就要用到浮动,页面的布局有时也会遇到浮动,那么怎么解决浮动的问题呢,我自己大概言简意赅的总结了我所知道的几种方法。

  首先造成浮动的原因是:元素浮动会造成元素脱离文档流,造成父元素没有高度。下面举一个例子:

<style>
    .box{
        background-color:gray;   /*两个方块的背景颜色*/
    }
    .left{                       /*红色方块*/
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{                      /*黄色方块*/
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: right;
    }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div>我是文字,哈哈哈哈</div>
</body>

效果图如下:

技术分享图片

问题:以上的图中,文字本应该在红色方块下方的,但是因为浮动问题,出现在了红色方块的右边。

解决方法

第一种:给父元素加上固定高度;

.box{
            background-color:gray;/* 两个方块的背景颜色*/
            height: 150px;
}

 

  这种方法必须要知道父元素高度是多少,灵活性不是很高,不建议使用。

效果图如下

 技术分享图片

 

第二种:父元素结束前加一个空的div 设置样式为clear:both;。

<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear:both"></div>
</div>

 

 

  这种方法给代码增加了冗余,也不建议使用。

效果图如下

技术分享图片

 

第三种:给父元素设置overflow:hidden

.box{
        overflow: hidden;
        background-color:gray;
    }

 

       这种方法的缺点主要有二个,一个是IE 6不支持,另一个是一旦子元素的大小超过父容器的大小,就会出显示问题。
       在这里简单的说一下,为什么overflow:hidden能清除浮动,给父元素加上overflow:hidden之后是要计算超出的大小来隐藏,所以父容器会自动撑开自己把所有的子元素放进去,同时会计算浮动的子元素。也顺便清理了浮动,但要真正去深度了解的话,建议去看BFC。

效果图如下

 技术分享图片

 

第四种:通过css伪元素:after解决

.clearfix:after{
            display:block;
            content:"";
            visibility:hidden;
            clear:both;
            height:0;
            font-size:0;
        }

 

 再把.clearfix放进父元素里:

<div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
</div>
<div>我是文字,哈哈哈哈</div>

 

  但这种方法:after选择器IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就可以了,如下:

.clearfix:after{
            display:block;
            content:"";
            visibility:hidden;
            clear:both;
            height:0;
            font-size:0;
        }
.clearfix {
    zoom: 1;
}

 

效果图如下

技术分享图片

 

  这大概是我所知道的几种,其实清除浮动的方法还是蛮多的,这几种的方法主要是clear的运用,以及对BFC机制的触发,如果想要深了解的话,建议大家不妨去看一下BFC吧。
  本人是前端初学者,也是第一次写博客笔记,以上是我的理解,如有问题,请多多指教。

  如果我有不足之处,敬请谅解,也可以指出,也去这位博主写的文章看看:http://blog.csdn.net/FE_dev/article/details/68954481  很详细,方法很多,也容易理解。

  如果想要了解的BFC的话,也可以去这位博主写的文章看看:http://www.cnblogs.com/asheng2016/p/7281784.html 也很容易理解。



以上是关于知了堂学习笔记清除浮动float的几种办法的主要内容,如果未能解决你的问题,请参考以下文章

知了堂学习笔记java 编写几种常见排序算法3

清除float浮动造成影响的几种解决方案

[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

[知了堂学习笔记]_初始化顺序

知了堂学习笔记/利用JavaScript对手风琴的实现/Aidrich

[知了堂学习笔记]_Java代码实现MySQL数据库的备份与还原