CSS测试实录二：float和标准流

时间：2022-07-24 14:19:01

来自官方的解释：

  1. float属性不等于 none 引起对象浮动时，对象将被视作行内块对象( iniline-block)，即 display 属性等于inline-block 。也就是说，浮动对象的 display 属性将被忽略。
  2. 跟随浮动对象的对象将取代原来浮动对象的位置，即：浮动对象脱离标准流开始浮动。浮动对象会向左或向右移动直到遇到边框border、内补丁padding 、外补丁margin 或者另一个块对象( block-level )为止。
  3. 我的一些体会，在标准流中，block在水平方向会自动伸展，直到到达父级元素的边界。而浮动元素会被自动设置成行内块！即他可以跟下一个兄弟同处一行，也可以设置宽高。
  4. 多个浮动方向一致的元素使用流式排列，一行满了则自动换行。此时要注意浮动元素的高度。对比以下几幅图：
    CSS测试实录二：float和标准流
    CSS测试实录二：float和标准流
    个人感觉：元素7因为是向左浮动，本来应该在6的右边，由于一行里边放不下他，就换行，向左浮动的过程碰到了5，就挂那里了！
  5. 浮动元素后的非浮动元素的显示问题！①浮动元素后边的非浮动元素是行内元素，并且定位时产生了重叠，此时行内元素边框、背景和内容都在该浮动元素“之上”显示。②若后边的非浮动元素是块级元素，由于浮动元素已经脱离了标准流，后面的非浮动元素就会顶到原来浮动元素的位置。要是在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之上”显示。（注意IE6的显示问题）
  6. 子元素全为浮动元素，父块的高度自适应问题！由于元素浮动后脱离了文档流，也就是说父元素里边已经没有内容了，所以父元素是无法根据元素来自适应的，就瘪啦。打个形象的比喻就是当JJ脱离BB的时候，BB的撑开与否跟JJ的大小是没有关系的（有点少儿不宜的感觉-_-|||） OK
    解决这类问题的方法：
    ①在所有浮动元素后加:　　<div style="clear:both;height:0px;"></div>
    ②使用万能clear——在你需要自适应的元素上加上class="clearfix" 
    .clearfix:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: "."; 
clear: both; 
height: 0; 
} 
* html .clearfix 
{ 
zoom: 1; 
} 
*:first-child + html .clearfix 
{ 
zoom: 1; 
} 
    ①首先是利用:after这个伪对象来兼容FF、Chrome等支持标准的浏览器，:after伪对象IE不支持。 
官方解释：用来和content属性一起使用，设置在对象后发生的内容。类似于:before这个伪对象
    例如：a:after{content:    "link";} 这个CSS将会让a标签后边加上link文本文字。 
    再如：a:after{content: attr(href);} 表示调用a标签的href属性值；attr(alt) 使用对象的 alt 属性的文字
    再如：还可以使用计数器产生动态数字或运用url(/path/to/file)路径插入图片。
    
②利用“    * html”这个只有IE6认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE6。 

③利用“*:first-child + html”这个只有IE7认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE7。

     ③双剑合璧！

    .fix{*zoom:1;}
/*暂不支持:after伪类的IE6/IE7，我们可以使用IE私有的zoom缩放属性让div远离浮动的破坏*/

    .fix:after{display:block; content:    "clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}    /*IE8+和其他所有现代浏览器都支持*/

     

标签：

相关文章