css技巧--浮动与清除浮动

在前端中,写页面对于浮动基本上没有谁不晓得,无论是在标题,导航,栅格都会使用到类似浮动的效果,在好多的排版布局中都会用到浮动,比如下面的这些页面都有应用到浮动

哪一个不是用到了浮动效果,当然也有人说可以用定位,或者float:flex布局;但这里讲的是相对于常用的.
在学习浮动的时候,总有时候被未清除浮动的搞得脑袋疼,那时候还不明白这叫清楚浮动.这里我就分享下,我对于浮动的一些理解.
1. 浮动的定义
　　使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
　　说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
　
1. 属性:
float:left 左浮动
float:right 右浮动

1. 浮动的情况:
   下面就用布局来演示
   

   

   　1.左浮动float:left;
   　　给里面的三个div标签 float:left; 属性，看一下是什么情况的。我们都知道块级标签会默认占据一行的所以他们是一排一个展示的，但是看下图会发现他们按照顺序排列成一排了。
   　　
   　
   　　2.右浮动 float:right;
   　　同样的我们给warp中的div标签一个 float:right; 属性。他们会按照顺序排到右边去了。

   　

   3.这一次我们只给第二个div浮动来看看会发生什么情况，这时候你会发现，3不见了，他其实在2的下面，我给3一个宽一点的宽度。会发现3在2的下面。
   

   4.给3一个浮动
   　　他会没有什么变化，因为浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的
   　　
   　
   　　5.把外面的div宽度变小一些，p浮动
   　　如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
   　
   6.浮动的特殊情况

   　　以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。初始样式是左图.　
   　　

   　

   7.浮动对文字的影响 给p标签浮动
   　　浮动框只会占据自己的位置，使文字可以围绕浮动框显示
   　　　
   对于为什么要清楚浮动我想有很多的小伙伴都很想知道 - -
   那么我们暂时就不给warp高度,然后浮动看看是一个怎样的效果
   
   对于这样的场景,大家应该很熟悉,在做布局的时候,有些时候总是不能给外盒子设固定死宽高,所以盒子没有撑开,如果继续布局,只会导致布局更加错乱,有几种做法可以消除这样的效果.:

   • 可以给你的外盒子添加一个 overflow: hidden; 能让他跟随内盒子的宽高变化
   • 父级元素 display:inline-block;　　warp给display:inline-block;可以正常显示　　缺点：父级盒子margin:auto;失效，会发现上部分和下面黄色中间有间隙。
   • 在div后添加一个div 设置他的style=”clear:both;”
   • after伪元素清除浮动,添加给box，依旧可以正常显示 clearfix:after{content:””; display:block; clear:both;}

最后一种做法是现在比较流行的一种 ..
以上是我对于浮动的了解和清楚浮动的技巧说明 ,如果有什么错误的地方,希望可以指正