html知识：清除浮动

来源：互联网发布：大连大数据编辑：程序博客网时间：2024/05/22 00:25

1.浮动定义：

  使元素脱离文档流（文档中可显示对象在排列时所占用的位置），按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

2.为什么要清除浮动：

   浮动不再占据文档流的位置，也使浮动元素周围的元素表现的如同浮动元素不存在一样，因此带来些副作用，如：    1>块状元素会钻进浮动元素下面，被浮动元素覆盖    2>行内元素，如文字会环绕在浮动的元素周围，为浮动元素留出空间    3>浮动元素的父元素会坍塌。    因此需要清除浮动，使得浮动元素依旧浮动，而浮动元素周围的元素不会受浮动的影响

3.清除浮动的方法：
背景例子：子级item添加左浮动之后，父级box未能包住子级item ，即父级崩塌，下面针对这个例子列出清除浮动的几种方法
父级崩塌清除浮动的例子

<style>    .box{          border: 1px solid red;        }    .item{          width: 200px;          height: 200px;          background-color: black;          float: left;    }       </style><body>    <div class="box">        <div class="item"></div>    </div></body>

    1.加高        让父级元素包住，给父级元素加高度（大于item高度）        缺点：扩展性不好

        .box{                border: 1px solid red;                height: 500px;            }

这里写图片描述

    2.让父级跟着浮动    问题：页面中所有元素都得跟着加浮动，且margin左右自动失效（floats bad ！）

    .box{                border: 1px solid red;                float: left;            }

这里写图片描述

    3.inline-block 清浮动方法：    回顾一下display下面的inline-block功效：使块元素<——>内联元素两者特性互换；给父级元素加上{display:inline-block;}    与让父级跟着浮动效果一致。

    4.空标签清除浮动，在item同级处加上空标签clearfix，然后给clearfix加上clear属性。    问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）    css的clear属性：        left    在左侧不允许浮动元素。        right   在右侧不允许浮动元素。        both    在左右两侧均不允许浮动元素。        none    默认值。允许浮动元素出现在两侧。        inherit 规定应该从父元素继承 clear 属性的值。

        <style>            .clearfix{                clear:both;           }            </style>        <body>            <div class="box">                <div class="item"></div>                <div class="clearfix"></div>            </div>        </body>

这里写图片描述

 5.  .br清浮动，在item同级处加上<br/>标签，使其<br clear="all"/> 问题：不符合工作中：结构、样式、行为，三者分离的要求

        <body>            <div class="box">                <div class="item"></div>                <br clear="all"/>            </div>        </body>

这里写图片描述

 6.overflow:hidden 清浮动方法；   问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；   overflow属性：        visible 默认值。内容不会被修剪，会呈现在元素框之外。        hidden  内容会被修剪，并且其余内容是不可见的。        scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。        auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。        inherit 规定应该从父元素继承 overflow 属性的值。  清浮动应用：父级元素加上overflow:hidden;

这里写图片描述

 7.最后但是是最重要主流的方式： after伪类 清浮动方法 综合方法5.6单独标签助清浮动的优点，并弊其短处； after伪类：在元素后面增加内容 .**:after{content:"";} 食用方法：父级元素加伪代类

    <style>            .clearfix{                 *zoom:1;                /*授权 ie6下  使元素根据自身内容计算宽高*/            }            .clearfix:after{                /*after ie6、7下不支持*/                content: "";                display: block;  /*使其成块级元素*/                clear: both;            }    </style>    <body>        <div class="box clearfix">            <div class="item"></div>        </div>    </body>

想巩固css伪类、伪元素知识请移步↓↓↓ (●’◡’●)
css :before,:after伪元素的理解和妙用

阅读全文

0 0