黑马程序员技术交流社区

标题: 【西安校区】浮动原理和清除浮动 [打印本页]
作者: 西安前端组    时间: 2018-2-21 18:00
标题: 【西安校区】浮动原理和清除浮动
本帖最后由 西安前端组 于 2018-2-24 18:11 编辑

浮动原理和清除浮动           

面试的时候浮动也是面试官经常问面试者的基础问题之一，浮动（float）也是大家平常在网页开发中经常使用的属性，（主要是为了让一些标签并排显示）。
        下面我先讲一下浮动的原理：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。  

           再来看看w3c对浮动的一些基本定义：
定义和用法

     float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。


如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。


注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。


默认值：none
继承性：no
版本：CSS1
JavaScript 语法：object.style.cssFloat="left"


可能的值

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。


    浮动的缺陷在上面已经说了，主要是存在高度塌陷问题，接下来我就要讲如何清除浮动
     1.通过设置父元素 overflow 或者display：table或者为父元素也添加float 属性来清除浮动，但这样做会出现一系列其他的问题，所以我不推荐这样做。
     2.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；具体看如下代码：
[html] 这种方法代优点是码量少，而且易懂，缺点是多了个没有任何语义的空标签，不利于后期维护
[css]1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。


这个方法利用了after伪类通过 content 在元素的后面生成了内容为一个点的块级元素，优点是结构和语义化完全正确,代码量居中，缺点是复用方式不当会造成代码量增加。


作者: 13793181975    时间: 2018-3-10 11:05
学习了一下，不错不错
作者: 13793181975    时间: 2018-3-10 11:06

学习了一下，不错不错



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2