float

CSS 之 float

我们几乎想不出其他任何使文字环绕图片的效果，除了使用float

概念

• float 将元素放在包含这个元素容器的左边或右边，并允许文本或行内元素包围这个元素。这个元素从页面的正常流中脱离，但仍然属于这个流的一部分。

  • float 这点和 absolute定位不同，在官方文档介绍绝对定位的元素从流中脱离，而其他非绝对定位的元素在定位时好像感觉不到绝对定位元素的存在。

  • 先看一个文字环绕图片的例子

  • 在这个例子中，上面的图像左浮动，文字围绕在图像右侧和下侧；下面的图像右浮动，围绕在图像的左侧和下侧

  • 

  • 如果我们将图像设置为absolute的绝对定位会怎样呢？（图片覆盖了文字，文字被图片挡住w(ﾟДﾟ)w）

  • 

  • 如果你觉得对比还不清楚，就看一个动态的。当我们动态改变更换图像从而改变图像的大小时，使用float布局的图像文字会随着图像改变位置。而使用absolute布局的图像文字依然被深深地遮挡着。。。(为了能让被遮挡的文字看见，我把给你一颗爱心复制了好几遍♥)

  • 

  • 

语法

• float的值
  • left: 元素会浮动到包含它的块元素的左边
  • right: 元素会浮动到包含它的块元素的右边
  • none: 元素不浮动，默认值
  • inline-start: 元素会浮动到包含它的块元素的的开始边
    • 奇了怪了，什么是开始边？你可能需要先了解下CSS direction属性。这个属性指定文本或表格列的方向。看个例子
    • 默认的汉字和英文都是从左到右书写的，但是像希伯来语和阿拉伯语是从右到左书写的，这时候就需要指定文字的方向，注意我们使用了unicode-bidi: bidi-override;，如果不加这个属性，中文的效果和text-align: right;一样，除了文字最后的句号位置跟加上一样。

    •   .left {
          direction: ltr;
        }
        .right {
          direction: rtl;
          unicode-bidi: bidi-override;
        }
      

    • 
  • inline-end: 元素会浮动到包含它的块元素的结束边
    • 下面看看浮动和这个属性之间的关系吧。
    • 

高度塌陷与清除浮动

高度塌陷

• 高度塌陷：是float元素影响其父元素产生的效果。如果父元素仅包含float元素，那么父元素就会塌陷其高度变为 0。

clear

• 如何修复高度塌陷呢？我们需要了解一下clear属性。该属性决定一个元素在清除浮动后是否应该移动到该元素之前的浮动元素后面。这个元素可以作用在浮动元素或非浮动元素上。有下面的值；
  • none: 元素不会清除浮动。
  • left: 元素向下移动，用于清除该元素之前的左浮动。
  • right: 元素向下移动，用于清除该元素之前的右浮动。
  • both: 元素向下移动，用于清除该元素之前的左右浮动。
  • inline-start:
  • inline-end: 和inline-start都类似left， right，参见上面对float这两个值的介绍。

应用于非浮动元素

• 我们先看一个小demo，了解一下这个元素分别作用在浮动元素和非浮动元素上的效果。当清除浮动应用于非浮动元素时，比较好理解。从定义理解，文字清除了左边的浮动后，移动到了该元素之前的左浮动元素（即文字前面的粉色div）的后面；清除了右边的浮动后，移动到了该元素之前的右浮动元素（即文字前面的蓝色div）的后面。
• ⚠：移动时，会发生margin collapse
• 注意这里的前后说的是在 HTML 中的书写顺序，不是在页面中的看到的前后。稍后我们在浮动元素上清除浮动你就会发现我说的没错。

•   <div class="left1 left">浮动到左边1</div>
    <div class="right1 right">浮动到右边1</div>
    <div class="wrap">
      14道成了肉身，住在我们中间，充充满满地有恩典，有真理。我们也见过他的荣光，正是父独生子的荣光。
      15约翰为他作见证，喊着说：“这就是我曾说，‘那在我以后来的，反成了在我以前的，因他本来在我以前。’”
      16从他丰满的恩典里，我们都领受了，而且恩上加恩。
      17律法本是藉着摩西传的，恩典和真理都是由耶稣基督来的。
      18从来没有人看见神，只有在父怀里的独生子将他表明出来。
    </div>
  

• 

应用于浮动元素

• 那我们看看clear作用在浮动元素上会有什么效果吧，很显然的是，当左2元素清除左浮动时，一共5个元素都移动到了浮动元素(左1)的下边；但是当右2元素清除右浮动时，却只有2个元素移动到浮动元素(右3)的下边，这是为什么呢？为什么清除右浮动时，三个左浮动元素没有改变位置呢？。
• 
• 原因就在这6个浮动元素的 html 书写顺序上。清除左2的左浮动时，根据定义左2会移动到它前面浮动元素(左1)下面，但是这个移动会影响到左2后面的浮动元素(左3, 右1, 右2, 右3)，因为后面浮动元素不能比前面浮动元素(左2)更高。参见这里👉。

•   <div class="left1 left">浮动到左边1</div>
    <div class="left2 left"> 浮动到左边2</div>
    <div class="left3 left">浮动到左边3</div>
    <div class="right3 right"> 浮动到右边3</div>
    <div class="right2 right">到右边2</div>
    <div class="right1 right">浮动到右边1</div>
  

修复塌陷：清除浮动

• 方法1：加空div
  • 既然清除浮动可以让元素移动到浮动元素下面，将空白的div元素加到浮动元素后父元素就会恢复高度。

  •   <input type="checkbox" name="addDiv" id="addDiv">添加或删除empty div
      <div class="box">
          <img src="coffee-part.png" alt="" class="imgFloat">
      </div>	
    

  •   $('#addDiv').bind('click', function(event) {
    	if (event.target.checked === true) {
      		$('.box').append('<div class="empty" style="clear: both;"></div>')
    	} else {
      		$('.empty').remove()
        }
      })
    

  • 
  • 这样看起来效果很好，但容易被人诟病的是div并不展示任何内容仅仅为了清除浮动。
• 方法2：使用overflow: hidden;
  • 给浮动元素的父元素添加overflow: auto或者overflow: hidden就可以使父元素容纳子元素从而使高度恢复。这个方法不用添加任何额外的空元素，但是overflow并不是为清除浮动设立的 CSS 属性。使用的时候要小心避免触发任何的滚动条。

  •   <input type="checkbox" name="addOverflow" id="addOverflow">
      添加或删除Overflow
      <div class="box">
          <img src="coffee-part.png" alt="" class="imgFloat">
      </div>	
    

  •   $('#addDiv').bind('click', function(event) {
    	if (event.target.checked === true) {
      		$('.box').css('overflow', 'hidden');
    	} else {
      		$('.box').css('overflow', 'inherit');
        }
      })	
    

  • 
  • 为什么添加overflow: hidden;可以清除浮动呢？因为添加完这个属性，父元素就变成了BFC(Block Formatting Context, 块格式化上下文)。详细了解☞点这里。如果一个元素是BFC，这个元素就会包含其内部的浮动元素，用官网的话说就是让浮动内容和周围的内容等高。其实，只要overflow不是visible，其他值都可以。
• 方法3：clearfix
  • 这个方法使用伪元素选择器:after(单冒号写法，兼容IE)清除浮动。只需给父元素添加clearfix类和下面的代码

  •   .clearfix:after {
            content: '.';
            display: block;
            overflow: hidden;
            height: 0;
            clear: both;
       }
    

  • 解释一下代码值得注意的部分。
    • 如果content: ''为空，可以删除overflow: hidden; height: 0;这两行代码，MDN官网就是这么写的。如果不为空自然要加上 overflow 和 height。
    • 为什么要加display: block;呢？因为:after的内容是内联元素，而clear只能作用在块元素。