消灭浮动的css写法有哪些【css教程】,css,清除浮动

本文经由过程图文并茂的情势给人人引见了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写法有哪些的细致内容，更多请关注ki4网别的相干文章！