zoukankan      html  css  js  c++  java
  • 关于清除浮动的一些简单理解。

          在我们学习css时,利用浮动可以为我们的的布局样式提供很大的便利,但是随着而来,我们也会遇到清除浮动的问题,关于清除浮动,我谈一谈我的一些简单看法。

           首先,我们为什么要清除浮动,因为浮动会使该标签脱离文档流,对前后的元素,还有父元素(边框,内容)都会造成影响。

    下面说一说清除浮动的方法:

    1 定义height

     为父元素增加一个固定或最少的height,因为当子元素设置为浮动后,脱离了文档流后,会导致父元素的边框无法撑开。所以我们可以增加一个

       “height:”或者“min-height:“来解决。

    这种方法的优点在于 : 上手容易,简单易懂。

                  缺点在于 : 要对高度进行详细的确定,且不灵活。


    2 利用clear:both

      在父元素的结束标签加入clear:both。在父元素内增加一个空白签,来声明其周围忽略浮动。

    html中 <div class="clear"></div>

    css中   .clear{

       clear:both

    }

    这种方法的优点在于 简单方便。

                 缺点在于 编程最忌讳添加很多空标签也会对以后的修改造成麻烦。


    3 利用overflow:hidden

    为父元素在css中添加 overflow:hidden,我们现在看看他们的意思是什么,overflow:溢出 ,hidden:清除。也就是清除溢出的部分,不显示其内容。那么很容易明白,利用这个,就是将带有浮动属性的<div>进行了清除。

    ."class名称"{

    overflow:hidden

    }

    这种方法的优点在于:代码使用的少,错误少。

                  缺点在于:无法与position一起使用,也不能同时定义height,因为是将多余的部分清除掉。


    以上三个方法是我在初学css清除浮动时用到学到的方法,作为一个web小白,能力有限,所解决问题的办法可能也不是最好的,欢迎大家提议,谢谢。

  • 相关阅读:
    pandas--对axis=0,axis=1的理解
    启动secondarynamenode时报错
    5月27日经历问题(在有框架的情况下从无到有增加一套功能)
    5.21工作记录(修改页面跳转,去掉多余的js;增加图片清除功能)
    工作记录520
    5月14日经历问题
    idea快捷键
    Linux下常用redis指令
    初识lunix
    Redis
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5326940.html
Copyright © 2011-2022 走看看