css-浮动

时间 2019-11-16

标签 css 浮动栏目 CSS 繁體版

原文原文链接

一，浮动的定义

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另外一个浮动盒的外边。若是存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐。若是没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了html

由于浮动（盒）不在普通流内，在浮动盒以前或者以后建立的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在同样。然而，接着浮动盒建立的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。ide

二，浮动的例子

浮动的定义很枯燥，下面咱们经过几个例子，来理解浮动的概念。
1.浮动盒放不下会换行
demo 连接描述spa

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
}
.box2{
  background: pink;
}
</style>

执行结果
全部盒子都会向左浮动，直到外边沿挨着块边沿。因为容器宽度不够，box3放不下，就只能向下移动最左边
3d

2.被卡住
demo 连接描述code

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
}
.box2{
  background: pink;
}
</style>

执行结果
因为box1的高度比box2的高，box3在向下向左移动的时候，遇到了box1的外边沿，就中止移动了。
htm

3.浮动和文本
demo连接描述blog

<div class="ct">
  <div class="box box1">1</div>
  <p>挨到包含块边沿或者另外一个浮动盒的外边。若是存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐
若是没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了</p>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
<style>
.ct{
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
  opacity:0.2;
}
.box2{
  background: pink;
}
  p{
    background-color:yellow;
  }
</style>

执行结果
咱们给p段落加上背景色，发现p段落是看不见浮动元素的，但里面的文字是能够看见浮动元素的。
当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是能够看见浮动元素的，行盒会缩短并给浮动元素让位。ip

写一下我理解的行盒的概念。行盒就是 line-box，也就是一个块级元素展现出的每一行就是一个行盒。块级元素内展现在一行的全部元素共同构成了一个行盒。好比下图的img和span1构成一个行盒，剩下2个span和button构成另一个行盒。当页面面积发生改变，每行的内容变化，行盒的内容也会变化。
这里有一篇写行盒(line box)垂直方向的文章连接描述ci

4.浮动会脱离普通流
普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。全部元素从上到下依次排列，普通元素能够把父元素的内容撑开。
但浮动元素脱离了普通流，元素不是一个个从上到下排列的，浮动元素也不能把父元素撑开，由于父元素压根就看不见浮动元素。
demo连接描述文档

5.块级元素设置浮动以后，宽度会收缩，宽度由内容决定。
行内元素设置浮动以后，能够设置宽高，内外边距。
感受有点像inline-block的特性

<body>
  <div class="box">这是div</div>
  <span>这是span</span>
  
  <style>
  .box{
    float: left;
    background: red;
  }
  span{
    float: left;
    background: blue;
    width: 100px;
    height: 50px;
    margin: 10px;
  };
  
  
  </style>

执行结果

当咱们取消浮动，结果是div占据一整行，span不能设置宽高和内外边距。

6.用浮动设置一个简单的导航栏

<div class="navbar">
    <ul>
      <li><a href="#">1首页</a></li>
      <li><a href="#">2产品</a></li>
      <li><a href="#">3服务</a></li>
      <li><a href="#">4关于</a></li>
    </ul>    
  </div>

<style>
    .navbar>ul{
      float: right;
      list-style: none;
    }
    .navbar>ul>li{
      float: left;
      margin-right: 15px;
    }
  
    
</style>

三，浮动的反作用

1.对后续元素位置产生影响
demo：连接描述

<div id="content">
    <div class="menu">侧边栏固定宽度</div>
    <div class="aside">侧边栏固定宽度</div>
    <div class="main">内容区块自适应宽度</div>    
  </div>
  <div id="footer">我是 footer，但个人样式出现了问题</div>
  
  <style>
  .aside{
    width: 150px;
    height: 300px;
    background: red;
    float: right;
    opacity:0.2;
  }
  .menu{
    width: 150px;
    height: 300px;
    background: red;
    float: left;
    opacity:0.2;
  }
  .main{
    margin-right: 160px;
    margin-left: 160px;
    background: blue;
    height: 200px;
  }
  #footer{
    background: grey;
  }
  
  </style>

执行结果：
因为浮动元素脱离普通文档流，致使浮动元素后面下一个元素footer的排列会出错。

（2）父容器高度计算出现问题
父元素看不到浮动元素，若是父元素没有设置高度，浮动元素是没法撑开父容器的。
demo连接描述
/li里面的元素所有浮动的状况下，.navbar的高度为0，因此设置背景色无效

四：清除浮动

(1)clear属性
clear能够用于任何元素，不管是否是浮动元素均可以加。

clear: left;

官方解释：要求该盒的top border边位于源文档中在此以前的元素造成的全部左浮动盒的bottom外边下方
不正经的理解：若是我前面有左浮动元素，我必须位于它的下方

clear: right;

官方解释：要求该盒的top border边位于源文档中在此以前的元素造成的全部右浮动盒的bottom外边下方
不正经的理解：若是我前面有右浮动元素，我必须位于它的下方

clear:both;

若是我前面有浮动元素，我必须位于它的下方

（2）封装一个clearfix的属性，用于父元素清除浮动
原理：父元素看不见元素，致使高度不正常。那咱们就放一个普通元素在父元素的最后，把高度撑开。因用伪元素能够省一个标签，因此就用伪元素

.clearfix::after {
  content:'';  //在父元素的最后生成一个内容为空的元素。
  display: block; //生成的伪元素是内联元素，须要设置成块级元素来占位置啊
  clear: both;  //把这个元素清除浮动，放在父元素的最下方，把父元素撑开
}

使用：把.clearfix封装成一个属性，之后想要在哪里清除浮动，就给它的父元素加上.clearfix的属性。
demo连接描述

五：浮动和负margin

两个浮动元素，若是因放不下致使其中一个下移，对下移的元素设置负 margin 值。
当-margin加自身的宽度小于容器的宽度，可将其上移.
如图所示，当box2的负margin为-2px，才能上移。

六：总结

一、浮动元素脱离了普通文档流，文档的普通流中的元素表现的就像浮动元素不存在同样，但文本能够看见浮动元素二、设置浮动后行内元素拥有一些块级元素的特性，能够设置宽高margin 块级元素有了行内元素的特性，再也不占据一整行，宽度决定于自身内容三、浮动元素不会将父容器撑开四、浮动元素左右浮动时遇到其余浮动元素会中止五、若是用了浮动，其父元素最好须要清除浮动