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

ranwu 发布于2019-08-01 16:58 / 2430人阅读

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

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;
    }

效果：

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

GPU云服务器云服务器我所知道数据迁移的四种方法的清除方法清除浮动

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

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

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

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

fnngj 2019-08-29 12:46 评论0 收藏0
css魔幻属性跟进篇

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

oogh 2019-08-30 14:16 评论0 收藏0
css清除浮动常用的四种方法实现

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

iliyaku 2019-08-29 16:14 评论0 收藏0
【CSS学习】--- float浮动属性

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

TigerChain 2019-04-23 11:48 评论0 收藏0
重拾css(9)——float

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

CollinPeng 2019-08-29 12:44 评论0 收藏0