轻轻松松搞懂CSS波动与消除波动图文详解

日期：2021-03-17 类型：科技新闻我要分享

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

1、float（波动）是甚么

float 特性界定元素在哪儿个方位波动。

float:left 元素向左波动。

float:right 元素向右波动。

float:none 默认设置值。元素不波动，并会显示信息在其在文字中出現的部位。

float:inherit 要求应当从父元素承继 float 特性的值。

看1段简易的编码：

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

2、clear是甚么

clear 特性特定段落的左边或右边不容许波动的元素。

clear:left 在左边不容许波动元素。

clear:right 在右边不容许波动元素。

clear:both 在上下两边均不容许波动元素。

clear:none 默认设置值。容许波动元素出現在两边。

clear:inherit 要求应当从父元素承继 clear 特性的值。

例如上面的事例，大家为 child3 再加 clear: both; ，即可消除波动。（child3的上下两边都不容许波动元素，当然而然不容易再跟在俩波动元素的屁股后边了~）

那末，只在1侧不容许波动是如何的呢？

原本是酱紫的：

<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就飘到了下1行。

那末，为 child1 再加 clear: left; 的情况下，为何不见效果呢？在这留个小彩蛋，欢迎大伙儿留言探讨~

3、波动带来的危害

波动带来的最大危害便是，当父元素只包括波动的子元素的情况下，父元素的高宽比就会塌陷（ height 变成 0 ）。

像酱紫：（parent高宽比为0，没法显示信息粉色情况）
<div class="parent">
    <div class="child1">child1右波动</div>
    <div class="child2">child2右波动</div>
</div>
  .parent {
    background: #FBC;//粉
  }

4、消除波动的方法

1. 在父元素中的末尾加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 的上下都不容许波动元素，那末它就会另起1段，致使盒子部位的实际效果就像 child2 消除右边波动1样， 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网页页面合理布局中HTML构造化返回下一篇：没有了