革除浮动的css写法是什么-百分百源码网

革除浮动的css写法是什么

发布时间：09/01 来源：未知浏览：关键词：

本文通过图文并茂的情势给大家介绍了CSS浮动与清除浮动的实例代码，很好，具有必然的参照借鉴价值，,需要的伴侣可以参照下

一、float（浮动）是啥

float 属性定义元素在哪个标的目的浮动。

float:left 元素向左浮动。

float:right 元素向右浮动。

float:none 默许值。元素不浮动，并会显示在其在文本中显现的位置。

float:inherit 规定应当从父元素继承 float 属性的值。

看一段简便的代码：

<div class="child1">左浮动</div>
<div class="child2">右浮动</div>
<div class="child3">喵</div>
  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

二、clear是啥

clear 属性指定段落的左侧或右侧不同意浮动的元素。

clear:left 在左侧不同意浮动元素。

clear:right 在右侧不同意浮动元素。

clear:both 在摆布两侧均不同意浮动元素。

clear:none 默许值。同意浮动元素显现在两侧。

clear:inherit 规定应当从父元素继承 clear 属性的值。

比方上面的例子，我们为 child3 加上 clear: both; ，便可清除浮动。（child3的摆布两侧都不同意浮动元素，天然而然不会再跟在俩浮动元素的屁股后面了~）

那么，只在一侧不同意浮动是怎样的呢？

原本是酱紫的：

那么，只在一侧不同意浮动是怎样的呢？
原本是酱紫的：
 
<div class="child1">child1右浮动</div>
<div class="child2">child2右浮动</div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

然后，为 child2 加上 clear: right; ，在child2的右侧不同意浮动元素，所以child2就飘到了下一行。

那么，为 child1 加上 clear: left; 的时候，为什么不起结果呢？在这留个小彩蛋，欢迎大家留言计议~

三、浮动带来的影响

浮动带来的最大影响就是，当父元素只包括浮动的子元素的时候，父元素的高度就会塌陷（ height 变为 0 ）。

像酱紫：（parent高度为0，没法显示粉色背景）
<div class="parent">
    <div class="child1">child1右浮动</div>
    <div class="child2">child2右浮动</div>
</div>
  .parent {
    background: #FBC;//粉
  }

四、清除浮动的方式

1. 在父元素中的结尾加一个空 div

div

<div class="parent">
  <div class="child1">child1右浮动</div>
  <div class="child2">child2右浮动</div>
  <div style="clear: both;"></div>
</div>

  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

可见，空 div 高度为0，位于父盒子的最下面，使父盒子从新撑起了应有的高度。

为什么要在最后加？倘使你在中心加，结果会是酱紫：

由于空 div 的摆布都不同意浮动元素，那么它就会另起一段，致使盒子位置的结果就像 child2 清除右侧浮动一样， child2 跑到了 child1 下方。

2. 在父元素设定 overflow 属性

? 道理：设定 overflow:hidden 或 overflow:auto ，阅读器会主动检查浮动区域高度（才能知道父框的内容有无溢出）
? 长处：阅读器支撑好
? 缺陷：子元素若超出父元素尺寸会被潜藏，或者父元素显现滚动条

<div class="parent" style="overflow:hidden;">
  <div class="child1">child1右浮动</div>
  <div class="child2" style="position:relative;top:10px;">child2右浮动</div>
</div>

当设定 overflow:auto; 时，父元素会显现滚动条：

3.伪元素

? 道理：相似设定clear属性
? 长处：阅读器支撑好，遍及

<div class="parent clearfix">
  <div class="child1">child1右浮动</div>
  <div class="child2">child2右浮动</div>
</div>
  .clearfix{
    zoom: 1;    //zoom（IE专有属性）可解决ie6，ie7浮动问题
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

更多CSS问题的相关技术文章，请拜访CSS问题教程栏目停止学习！

以上就是清除浮动的css写法是什么的具体内容，更多请关注百分百源码网其它相关文章！

打赏