css 三(清除浮动专题)

时间:2023-01-09 13:20:27

1.  三个关于浮动的概念

 不浮动float:none;

清除周围的浮动元素   float:both   这是清除浮动的本意

清除子元素浮动对父元素的影响  clearfix    很多人都理解成这个叫清除浮动。。

2. 什么是清除浮动

清除浮动不是把当前标签的浮动给清除了,如果这样,还加浮动做什么

其实清除浮动指的是清楚当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了。

3. 为什么要清楚浮动

在布局的时候我们经常希望某些内容能够水平排布,水平排布后,由于内部内容不确定,高度不能简单的给一个定值。而如果不给高度,子元素又都浮动了,父盒子就会因为没有子盒子的支撑而塌陷。

利用清除浮动的这个特性,我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来,并且能够根据内部内容的变化而改变高度。

4.  清楚浮动的方法

  4.1.       额外标签法

    原理:单独使用一个标签加上clear:both跑到浮动元素下面,从而消除子盒子浮动造成的父盒子塌陷。

    典型网站:京东

    优点:通俗易懂,容易掌握

    缺点:添加很多无意义的空标签,不符合结构与表现分离的原则,不利于后期维护

  4.2.       父元素设置overflow:hidden

    原理:让父盒子形成BFC,BFC的特性之一就是可以承载浮动元素

    优点:不存在结构和语义化问题,代码量极少

    缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

  4.3.       单伪元素

     .clearfix:after {
        content: "";
        height: 0;
        visibility: hidden;
        overflow: hidden;
        dispaly: block;
        clear: both;
    }
    .clearfix {
        zoom: 1;/*IE67*/
    }

    典型网站:新浪、网易

  4.4       双伪元素

    .clearfix简介

    .clearfix:before, .clearfix:after {
          content: "";
          display: table;
    }/*在有该类的元素内部元素的前面和后面添加元素*/
    .clearfix:after {
        clear: both;
    }/*只要after两侧有浮动元素,after就会跑到最下面,从而撑开带有该类名的父盒子*/
    .clearfix {
        *zoom: 1;
    } /*用于兼容IE/7/6*/

    用display:table是因为display:block有空隙

    加了一个before是为了防止外边距合并

    典型网站:小米、淘宝