zoukankan      html  css  js  c++  java
  • 清除浮动专题

    1.三个已经混淆的概念

    (1)不浮动float:none;

    (2)清除周围的浮动元素

    (3)清除子元素浮动对父元素的影响

    2.什么是清除浮动

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

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

    3.为什么要清楚浮动

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

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

    4.清除浮动的方法

    (1)额外标签法

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

    典型网站:京东

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

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

    (2)父元素设置overflow:hidden

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

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

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

    BFC(block formatting content)快格式化上下文,是W3C规定的一种独立渲染区域。

    其特性为:

    • BFC会阻止外边距折叠
    • BFC可以承载浮动元素
    • BFC可以阻止元素被浮动元素覆盖

    总而言之,就是独立了。

    哪些情况会触发BFC

    • float除了none以外的值
    • overflow除了visible以外的值(hidden,auto,scroll)
    • display(table-cell,table-caption,inline-block)
    • position(absolute,fixed)
    • 根元素

    (3)单伪元素

    .clearfix:after {

      content: "";

      height: 0;

      visibility: hidden;

      overflow: hidden;

      display: block;

      clear: both;

    }

    .clearfix {

      zoom: 1;/*IE67*/

    }

    典型网站:新浪、网易

    (4)双伪元素

    .clearfix:before, .clearfix:after {

      content: "";

      display: table;

    }/*在内部元素的前面和后面添加元素*/

    .clearfix:after {

      clear:both;

    }/*只要after两侧有浮动元素,after就会跑到最下面,从而撑开带有该类名的父盒子*/

    .clearfix {

      *zoom: 1;/*用于兼容IE/7/6*/

    }

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

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

    典型网站:小米、淘宝

    别给未来太多想象,多给今天一点力量。
  • 相关阅读:
    PAT 1097. Deduplication on a Linked List (链表)
    PAT 1096. Consecutive Factors
    PAT 1095. Cars on Campus
    PAT 1094. The Largest Generation (层级遍历)
    PAT 1093. Count PAT's
    PAT 1092. To Buy or Not to Buy
    PAT 1091. Acute Stroke (bfs)
    CSS:word-wrap/overflow/transition
    node-webkit中的requirejs报错问题:path must be a string error in Require.js
    script加载之defer和async
  • 原文地址:https://www.cnblogs.com/Jerry-MrNi/p/6339613.html
Copyright © 2011-2022 走看看