犟驴学编程

# 浮动

作者: 多叉树；转载须注明出处

# 浮动

浮动是为了元素标签的并排显示问题。

我们在浏览网页的时候，经常会看到 几个 div 块是可以并排显示的， 浮动就是解决这样问题的方法之一。

float属性有以下的值

  • float: left; 左浮动
  • float: right 右浮动

浮动的特点

  • 浮动主要针对的是并排显示的盒子而言。
  • 在一个父容器的盒子里， 兄弟元素之间要浮动必须都浮动。
  • 父容器必须要有一个足够的宽度，否则不足以使得各个子元素之间并排展示。
  • 一个父容器的盒子内，兄弟元素会按照顺序贴靠，如果是左浮动，就往左贴合；如果是右浮动，就往右贴合。如果发现贴合的盒子后没有足够的空间，则会在寻找前一个兄弟元素进行贴靠。直到空间合适为止。
  • 浮动的元素已经脱离了标准的HTML文档流，不再区分块级元素、行内元素并且一律能设置宽度和高度，即使它是span标签或者a标签

一个浮动的例子


<!--一个浮动的例子-->
<style>

    .box1 {
        width: 600px;
        height: 200px;
        border: 1px solid #000;
    }

    .box1 .con1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
    }

    .box1 .con2 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }

    .box1 .con3 {
        width: 201px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
    }

</style>
<div class="box1">
        <div class="con1"></div>
        <div class="con2"></div>
        <div class="con3"></div>
</div>

<!--一个span标签也能浮动的例子-->

<style>

   span {
    float: left;
    height: 50px;
    width: 200px;
    margin-left: 20px;
    background-color: orange;
   }

</style>
<span>1</span>
<span>2</span>
<span>3</span>

一个顺序贴靠的例子

<!--  一个顺序贴靠的例 子-->
<!-- 以下代码中 兄弟元素 con1， con2， con3 之间会进行顺序贴靠-->
<!-- con3 在贴靠 con2 的时候，发现父容器的宽度只能是400px, 分别被con1 和 con2 占据， 所以con3 会找 cont1 贴靠，最终con3 位于 con1右边， con2下边 -->

<style>

  .box1 {
      width: 400px;
      height: 200px;
      border: 1px solid #000;
  }

  .box1 .con1 {
      width: 200px;
      height: 200px;
      background-color: orange;
      float: left;
  }

  .box1 .con2 {
      width: 200px;
      height: 100px;
      background-color: blue;
      float: left;
  }

  .box1 .con3 {
      width: 200px;
      height: 100px;
      background-color: yellowgreen;
      float: left;
  }

</style>
<div class="box1">
  <div class="con1"></div>
  <div class="con2"></div>
  <div class="con3"></div>
</div>

# 清除浮动

清除浮动是为了 不影响设置浮动标签的后续的标签的布局展示。

因为，在一个父容器中，子元素浮动了，脱离了标准文档流，不在占用之前的位置，会导致 无法撑开没有设置高度的父元素；从而导致后续的结构挤压，造成整个页面布局的混乱。

  1. 给父元素加个高度。在那些明确知道父容器高度的情况下，可以使用。

    
<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    height: 100px;
  }
  p {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    background-color: red;
  }
</style>

<body>
	<div>
	  <p></p>
	  <p></p>
	</div>
	
	<div>
	  <p></p>
	  <p></p>
	  <p></p>
	</div>
</body>

  2. 后续元素增加 clear:both ,清除前面元素对自己的影响。

    <style>
    * {
        margin: 0;
        padding: 0;
    }
   
    .box2 {
        margin-top: 20px;
        clear: both;
    }
    p {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background-color: red;
    }

</style>

<body>
<div>
    <p></p>
    <p></p>
</div>

<div class="box2">
    <p></p>
    <p></p>
    <p></p>
</div>
</body>

  3. 浮动的父容器添加后续伪元素，clear:both ，清除浮动对后续元素的影响(推荐方式)。

    
<style>
  * {
      margin: 0;
      padding: 0;
  }

  .cleafix::after {
      content: '';
      clear: both;
      display: block
  }
 
  p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      background-color: red;
  }

</style>

<body>

<div class="cleafix">
  <p></p>
  <p></p>
</div>

<div class="cleafix">
  <p></p>
  <p></p>
  <p></p>
</div>
</body>

  4. 额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。

    
<style>
* {
  margin: 0;
  padding: 0;
}

.clearboth {
  clear: both;
}

p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>

<body>
<div>
<p></p>
<p></p>
</div>

<div class="clearboth"></div>

<div>
<p></p>
<p></p>
<p></p>
</div>
</body>

  5. 额外的空标签，在浮动元素的父盒子之后添加一个空标签，空标签上添加 clear:both 属性。

    
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  overflow: hidden;
  margin: 20px;
}
p {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  background-color: red;
}
</style>
 
<body>
  <!--
      两个div
      第一个div中的元素在内部浮动 
      第二个元素中的div在内部浮动
	    但是两个父盒子之前不要互相影响
  -->
  <div>
    <p></p>
    <p></p>
  </div>

  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

扫码关注（有广告，介意请勿关注）

← 定位 →