浮动
主要内容
- 标准文档流
- BFC规范和浏览器差异
- 清除浮动
标准文档流
宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
标准文档流的特性
（1）空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。
（2）高矮不齐，底边对齐：
（3）自动换行，一行写不满，换行写
脱离标准文档流
css中一共有三种手段，使一个元素脱离标准文档流：
-
浮动
-
绝对定位
-
固定定位
浮动
浮动的最本质功能：用来实现并排
浮动的使用
浮动使用要点：要浮动，并排的盒子都要设置浮动
父盒子要有足够的宽度，否则子盒子会掉下去
浮动的性质
- 浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。
- 浮动的元素一定能设置宽高：浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是<span><a> 标签等。
- 浮动的元素有“字围”效果：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）。
- 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
BFC规范和浏览器差异
BFC规范
BFC（Box Formatting Context，块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到
外面的元素，反之亦然。
如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值inline-block、flex或者inline-flex
- overflow:hidden
什么是overflow:hidden;
- overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
- overflow:hidden;是非常好用的让盒子形成BFC的方法
BFC的其他作用
- BFC可以取消盒子margin塌陷
- BFC可以可以阻止元素被浮动元素覆盖,如下图：
浏览器差异
- IE6，7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”。
- 如果要制作兼容到IE6，7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程，不要“玩杂技”。
清除浮动
为什么要清楚浮动?
清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
下面这个例子，有两个块级元素div，div没有任何属性，每个div里有p，如果我们给里面的p标签加浮动,效果如下：
上图中，我们发现：第二组中的第1个p，去贴靠第一组中的最后一个p了（我们本以为这些p会分成两排）。浮动的元素，只能被有高度的盒子关住。
清除浮动方法
-
清除浮动方法1：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性
<style> * { margin: 0; padding: 0; } div { overflow: hidden; margin-bottom: 10px; } p { float: left; width: 100px; height: 100px; background-color: orange; margin-right: 20px; } </style> <body> <div> <p></p> <p></p> </div> <div> <p></p> <p></p> </div> </body> -
清除浮动方法2：给后面的父盒子设置clear:both属性。clear：both表示清除浮动对自己的影响，表示左右浮动都清除。这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。
<style> * { margin: 0; padding: 0; } .box2 { margin-top: 20px; clear: both; } p { float: left; width: 100px; height: 100px; background-color: orange; margin-right: 20px; } </style> <body> <div> <p></p> <p></p> </div> <div class="box2"> <p></p> <p></p> </div> </body> -
清除浮动方法3：使用::after伪元素，并且给::after设置clear:both。
<style> * { margin: 0; padding: 0; } .clearfix::after { content: ''; clear: both; /* 转为块级元素 */ display: block; } div { margin-bottom: 10px; } p { float: left; width: 100px; height: 100px; background-color: orange; margin-right: 20px; } </style> <body> <div class="clearfix"> <p></p> <p></p> </div> <div class="clearfix"> <p></p> <p></p> </div> </body> -
清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。上面这个例子中，为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
<style> * { margin: 0; padding: 0; } p { float: left; width: 100px; height: 100px; background-color: orange; margin-right: 20px; } .cl{ clear: both; } .h20 { height: 20px; } .h22 { height: 22px; } </style> <body> <div> <p></p> <p></p> </div> <div class="cl h20"></div> <div> <p></p> <p></p> </div> </body>
。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
