CSS浮动

复习准备面试，遇到了浮动问题，进行了如下实践和总结。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

向右浮动

现在给box1一个float:right,box1就会向右浮动

向左浮动

给box1一个float:left,box1会向左浮动，并且覆盖掉box2,

但是此时你会发现一个问题，就是box2的文字怎么跑到box3的位置上去了？
原因其实是float导致的bug会经常出现，所以用float要谨慎。也就是说文字不会随着元素的浮动一起浮动，浮动元素脱离了文档流，但是文字没有，还是会受文档流的影响进行布局。如何解决呢？
最直接的解决办法就是把文字用div包裹起来，然后给这个子div设置position: absolute，外层div设置position: relative;在这里注意的是给外层，而不是给它的父元素，如果你给父元素加了position:relative就会产生一个问题：box2覆盖了box1，哈哈，比如：

   <div class="wrap">
        <div class="box box1">box1</div>
        <div class="box box2"><div>box222222222222222222</div></div>
        <div class="box box3">box3</div>
    </div>
//style样式：
<style>
        .wrap {
            width: 700px;
            height: 700px;
            border: 1px solid #000;
            
        }
        .box {
            width: 200px;
            height: 200px;
        }

        .box1 {
            background-color: blueviolet;
            /* float: right; */
            float: left;
        }

        .box2 {
            background-color: cadetblue;
            position: relative;
        }
        .box2 div{
            position: absolute;
            left: 0;
            top: 0;
        }

        .box3 {
            background-color: chartreuse;
        }
    </style>

所以还是给外层的.wrap加吧，hahahaha

每一个都浮动

如果你给了每一个box了一个float:left,那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。就是这样的：

图片的浮动

图片不浮动：

图片向左浮动：
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

再清楚的看看浮动的清除浮动。
假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有边框的元素中。有以下代码：

  		.news{
            border: 1px solid chocolate;
        }
        .news img{
            float: left;
        }
        .news div{
            float: right;
        }
     <div class="news">
        <img src="1.jpg" alt="" width="100px" height="100px">
        <div style="background-color: burlywood;">浮动框旁边的行框被缩短</div>
        <div style="background-color: aquamarine;clear: both;">要想阻止行框围绕浮动框，。</div>
    </div>       

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

	.news{
            border: 1px solid chocolate;
        }
        .news img{
            float: left;
        }
        .news div{
            float: right;
        }
        .clear {
  			clear: both;
  		}
     <div class="news">
        <img src="1.jpg" alt="" width="100px" height="100px">
        <div style="background-color: burlywood;">浮动框旁边的行框被缩短</div>
        <div style="background-color: aquamarine;clear: both;">要想阻止行框围绕浮动框，。</div>
        <div class="clear"></div>
    </div>   

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记
不过我们还有另一种办法，那就是对容器 div 进行浮动：

  		.news{
            border: 1px solid chocolate;
            float: left;
        }
        .news img{
            float: left;
        }
        .news div{
            float: right;
        }
    <div class="news">
        <img src="1.jpg" alt="" width="100px" height="100px">
        <div style="background-color: burlywood;">浮动框旁边的行框被缩短</div>
        <div style="background-color: aquamarine;clear: both;">要想阻止行框围绕浮动框，。</div>
    </div>         

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。