css浮动特性及清除浮动详解

css浮动特性及清除浮动详解

浮动的主要应用

1.图文混排（文字环绕在图片周围）

css部分
   .box {
      width: 400px;
      border: 1px solid red;
      margin: 20px auto;
    }
    .box img {
      width: 200px;
      height: 200px;
    }
html部分
  <div class="box">
    <img src="./xiaobai.jpg" alt="">
    <p>
      小白是日本著名漫画《蜡笔小新》主角之一，
      野原家的小狗，很可爱，设定前期为一只呆
      呆的小狗；后期为加入更多乐趣，赋予了小白
      “超高的智商”，被诸多网友戏称为“神犬”、“白神”。
      野原家养的狗（小新捡到的），雄性、毛色
      为雪白、体型似棉花球，昵称小白，很聪明。
      著名特技是“棉花糖”（把身体卷成球型）
      和抓重要部位（称为“抓小鸡鸡”），这些
      当然也是跟野原新之助学习的，美伢叫
      他教小白一些特技，说不定能加入马戏团
      ，所以小新就花了一整天教它一堆把戏，
      当晚验收成果，还拍摄影带，结果教出来的却是这个样子....
    </p>
  </div>

• 样式显示
  
• 接下来我们只需要给图片标签添加浮动，就实现图文混排

 .box img {
      width: 200px;
      height: 200px;
      float: left;
  }

1. 样式显示
   
2. 块级元素的横向排列

css部分
    .box {
      width: 400px;
      height:300px;
      border: 1px solid green;
      margin: 30px auto;
    }

    .box div {
      width: 100px;
      height: 100px;
    }

    .box .box1 {
      background: red;
    }

    .box .box2 {
      background: blue;
    }

    .box .box3 {
      background: pink;
    }
 html部分
 	<div class="box">
	    <div class="box1"></div>   红色
	    <div class="box2"></div>   蓝色
	    <div class="box3"></div>   粉色
  	</div>   

• 显示样式
  
• 给需要横向排列的盒子添加浮动

 .box div {
      width: 100px;
      height: 100px;
      float: left;
  }

1. 样式显示
   

浮动特性

1. 浮动的元素按照浮动属性会从父元素的左上角或者右上角排排站，当父元素的宽度不足以放下浮动元素时，会换行显示，并且换行后的起始位置由设置的浮动属性值决定（以右浮动举例）

css部分
   .box {
      width: 250px;
      border: 1px solid green;
      margin: 30px auto;
      height: 300px;
    }
    .box div {
      width: 100px;
      height: 100px;
      float: right;
    }
 html部分
	<div class="box">
	    <div class="box1"></div>  红色
	    <div class="box2"></div>  蓝色
	    <div class="box3"></div>  粉色
	</div>

• 样式显示（父元素设置宽度为250，子元素总宽300，显示不下换行显示，因为设置了右浮动，所以换行后还是靠着右显示）
  

2. 浮动的元素会脱离文档流不占据空间（文档流可以理解为正常布局产生的页面是处于一个平面的流，当给元素添加浮动后，可以理解他处于正常流的上一个平面了，漂浮起来了，即为脱离文档流）
   那脱离文档流会产生的影响是什么呢？？结果就是浮动元素的后面的非浮动元素会到浮动元素的下面（因为脱离文档流了，不占据位置了，他的地盘给他兄弟了）

css部分
   .box .box1 {
      background: red;
      width: 100px;
      height: 100px;
      float: left;
    }

    .box .box2 {
      width: 200px;
      height: 200px;
      background: blue;
    }
html部分
  <div class="box">
    <div class="box1"></div>  红色
    <div class="box2"></div>  蓝色
  </div>

1. 样式显示（红色方块浮动，脱离文档流，蓝色块占据红色原位置）
   
   3.浮动元素脱离文档流后，下面未浮动的元素会占据浮动元素的位置，导致未浮动的元素会被浮动遮挡，但是文字不会被遮挡，这个特性也就是为啥可以用浮动来做图文混排的原因，以上面的图文混排为例，

• 样式展示（通过审查元素可以看到其实 p 标签已经被 img 标签挡住了，但是文字是没被挡住的，可以这么理解，把img标签当做的沙子，把 p 标签当做是混有石头的水流，当遇到沙子时，水会渗投进去，但是石头留在外面）这里还要强调一点假设要设置图片和文字的之间的距离，正常情况是可以设置 img的右边距，或者 p 的左边距，但是因为这里p是从最顶头开始显示的，加左边距会从顶头开始，所以只能加给img的右边距
  

浮动产生的问题（这里只讲嵌套元素时，产生高度塌陷的问题）

产生高度塌陷的条件
1、父元素没有设置高度，想要通过子元素来撑开
2、子元素浮动了（也就是脱离文档流导致没撑开父元素）

css部分
  .box {
      width: 300px;
      height: 200px;  // 父元素有高度
      margin: 20px auto;
      border: 10px solid pink;
    }

    .box div {
      width: 100px;
      height: 100px;
      float: left;
    }

    .box .box1 {
      background: red;
    }

    .box .box2 {
      background: blue;
    }
html部分
	<div class="box">
	   <div class="box1">
	   </div>
	   <div class="box2">
	   </div>
	</div>    

• 样式展示 （父元素有高度，子元素浮动，父元素高度不受影响）
  *
  现在把父元素高度去掉，子元素依然浮动，

  .box {
      width: 300px;
      /*height: 200px;*/父元素高度注释
      margin: 20px auto;
      border: 10px solid pink;
    }

• 样式展示（本来父元素的区域应该被撑开，但是发现现在只剩边框了，这就是高度塌陷）
  
  当我们没有设置边框或者背景色如何知道是塌陷了，顾名思义高度塌陷就是内容没高度了，我们检查元素便可知道是有没有高度，或者已经很熟悉高度塌陷的条件的话，就直接可以笃定是塌陷了。
• 样式展示（控制台检查元素后，高度只剩边框（上10px+下10px））
  

清除浮动

当产生高度塌陷的问题时，我们用最优化的方法 给高度塌陷的元素添加伪元素来清除浮动

css部分
   .clearfix::after {
      content: "”;
      clear: both;  清除浮动
      display: block; 转换为块元素
    }
html部分
 <div class="box clearfix">  将浮动class添加到高度塌陷的父元素
    <div class="box1">
    </div>
    <div class="box2">
    </div>
  </div>

• 样式展示（父元素由于清除浮动后，高度被子元素完全撑开）

总结

以上就是关于浮动的一些应用、特性、产生问题及解决方法，关于清除浮动一定要记住两个条件，如果高度设置了是不需要清除浮动的