html知识：清除浮动

最新推荐文章于 2022-04-26 16:29:13 发布

young_Emily

最新推荐文章于 2022-04-26 16:29:13 发布

阅读量438

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/young_Emily/article/details/75221065

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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伪元素的理解和妙用

young_Emily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html知识：清除浮动

1.浮动定义：使元素脱离文档流（文档中可显示对象在排列时所占用的位置），按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。2.为什么要清除浮动：浮动不再占据文档流的位置，也使浮动元素周围的元素表现的如同浮动元素不存在一样，因此带来些副作用，如： 1>块状元素会钻进浮动元素下面，被浮动元素覆盖 2>行内元素，如文字会环绕在浮动的元素周围，为浮动元素留出空间
复制链接

扫一扫

专栏目录