资讯专栏INFORMATION COLUMN

我所知道的CSS清除浮动四种方法

ranwu / 2425人阅读

摘要:清除浮动不清除浮动会怎么样效果子元素并没有撑开父容器,这就是我们要清除浮动的原因。

CSS清除浮动 不清除浮动会怎么样?

HTML:

CSS:

.container{
        width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: #ffff00;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: #fa0000;
        float: right;
    }

效果:

子元素div并没有撑开父容器,这就是我们要清除浮动的原因。


解决方法:

在浮动元素后面添加 class 为 clear 的 空 div 元素,给这个 div 设置样式 .clear{clear:both;}

HTML:

CSS:

.clear{
      clear:both;
   }

效果:


给父容器添加 overflow:hidden 或者 auto 样式

HTML:

CSS:

.container{
         width: 300px;
        border: 1px solid #000;
        background-color: #aaa;
        overflow:hidden; /*或者auto */
        zoom:1;   /*IE6*/
    }

效果:


给父容器添加 clearfix 的 class ,用 伪元素 clearfix:after 来设置样式,清除浮动

HTML:

CSS:

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

效果:


给父容器添加浮动,这种方法用于本身父元素就是浮动的情况下,一般不使用这种方法,

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50866.html

相关文章

  • 我所知道CSS清除浮动四种方法

    摘要:清除浮动不清除浮动会怎么样效果子元素并没有撑开父容器,这就是我们要清除浮动的原因。 CSS清除浮动 不清除浮动会怎么样? HTML: CSS: .container{ width: 300px; border: 1px solid #000; background-color: #aaa; } .lef...

    fnngj 评论0 收藏0
  • css魔幻属性跟进篇

    摘要:中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么,可以理解为内联元素没有盒模型,其高度由内容决定。 白话:即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后,这是自己写的第四篇CSS相关的文章,文章绝大部分是自己工作总结得来,另一部分是平日sf回答的与面试中向面试官交流学到的,都是一...

    oogh 评论0 收藏0
  • css清除浮动常用四种方法实现

    摘要:用这种方法清除浮动,会为文档中增加不必要的结构,不推荐。可以包含浮动元素,所以能实现撑起高度的效果。以上是常用的几种方法,可以根据场景的不同选择适合的。 在页面布局中经常会用到浮动和清除浮动的操作,但之前是知其然而不知其所以然,看过多篇文章后,有了一些深入的了解,特整理下来! 浮动的目的: 最初设计浮动的目的是为了实现文字等内容可围绕图像显示,后来发现浮动方便布局,所以支持浮动任何元素...

    iliyaku 评论0 收藏0
  • CSS学习】--- float浮动属性

    摘要:浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。不浮动的浮动的三浮动之于块浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。  一、前言     浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的。float浮动属性的四个参数:left:元素向左浮动;right:元素向右浮动;none:默认值,元素不浮动;i...

    TigerChain 评论0 收藏0
  • 重拾css(9)——float

    摘要:导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏,父子关系解除。 1.引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以,系统的学一学float是非常...

    CollinPeng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<