zoukankan      html  css  js  c++  java
  • 浮动影响

    一、浮动元素自动变块级元素

    非浮动元素占据浮动元素位置,浮动元素不能占据非浮动元素位置???向上占据

    浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。

    <div style="height: 200px;  200px;"> 
    <span style="float: left;  150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color: Olive;">浮动元素span</span> 
    </div> 
    <div style="height: 200px;  200px;"> 
    <span style=" 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red; background-color:Olive;">非浮动元素span</span> 
    </div> 
    

    二、并列关系的盒子,不一致地浮动,位置问题

    元素浮动会对后面非浮动的兄弟元素产生影响

    可能情况

    1. 后边若是非浮动行内元素,且因为定位产生重叠时,行内盒子模型压在该浮动元素之上
    2. 后边若是非浮动块级元素,且在定位后产生重叠时,该块级的内容围绕该浮动元素显示,其他在该浮动元素底下

    示例代码如下:

    <div style=" 600px; height: 500px; border: solid 1px blue; background-color: yellow;"> 
    
    <div style="float: left;  250px; height: 250px; border: 
    solid 1px Aqua; background-color: gray; margin: 10px 0 0 10px;"> 
        浮动DIV
    </div> 
    
    <div style="background-color: red;  300px; height: 150px;"> 
        跟在浮动元素后边的DIV
    </div> 
    
    <span style="background-color: red; margin: 0 0 0 -50px;"> 
        跟在浮动元素后边的span
    </span> 
    </div> 
    

    效果如下

    不过在ie6这个效果却很怪异,如图:

    浮动元素没有压在非浮动div之上,反而把span压住了。

    解决办法

    对被浮动影响的元素添加clear:both

    三、并列关系的盒子,一致地同方向浮动,高度不一致问题

    多个同方向浮动元素一般是按照流式布局,一行满了则自动换行,也就是类似于以下效果:

    但各个浮动元素高度不一致的话效果很可能出现下边的情况:

    原因

    主要排列到元素7的时候,一行已经显示不下了,所以要换行,但此处换行并不是从行头开始,而是从元素5那开始,因为元素5比元素6高很多导致。

    四、包含关系的盒子,

    可能情况

    里面盒子浮动,包住它的盒子不浮动时,父盒子背景无显示

    原因

    由于元素浮动后脱离了文档流,所以父元素是无法根据元素来自适应的。

    解决办法1 clear:both

    用法

    在所有浮动元素后加: <div style="clear:both;height:0px;"></div>

    <div style="border:2px solid red;"> 
    <div style="float:left;80px;height:80px;border:1px solid blue;">TEST DIV</div> 
    <div style="clear:both;"></div> 
    </div> 
    

    原理

    子元素浮动后,因为脱离文档流,所以父元素包含不住,无法撑开。由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

    解决办法2 overflow

    用法

    <style>
        .box{
            background-color: yellow;
             overflow:atuo;     //或者是hidden,.box是父盒子
        }
        .box1{
             100px;
            height: 100px;
            background-color: green;
        }
        .box2{
             100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <body>
    <div class="box">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>
    </body>
    

    原理

    在父元素上设置overflow这个属性,如果父元素的这个属性设置为auto或者是hidden,父元素就会扩展包含浮动,这个方法有着比较好的语义性,因为它不需要额外的元素,但是,要记住一点,overflow属性不是为了清除浮动而定义的,要小心不要覆盖住内容或者触发了不需要的滚动条。

    解决办法3 clearfix类

    用法

    <style>
     .clearfix:after{ content:"";  display:table;  height:0;
        visibility:both;  clear:both;}
    
    .clearfix{*zoom:1;    /* IE/7/6*/}
    </style> 
    
    <body>
    <div class="box clearfix">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>
    </body>
    

    原理:

    这种方式这样理解,就是利用伪类元素,也就是在有浮动的标签前面添加一个块级元素,来达到效果。

  • 相关阅读:
    HDU 5528 Count a * b 欧拉函数
    HDU 5534 Partial Tree 完全背包
    HDU 5536 Chip Factory Trie
    HDU 5510 Bazinga KMP
    HDU 4821 String 字符串哈希
    HDU 4814 Golden Radio Base 模拟
    LA 6538 Dinner Coming Soon DP
    HDU 4781 Assignment For Princess 构造
    LA 7056 Colorful Toy Polya定理
    LA 6540 Fibonacci Tree
  • 原文地址:https://www.cnblogs.com/KarmaDeng/p/7243207.html
Copyright © 2011-2022 走看看