webbasic之如何消除浮动影响

Posted 野生猿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webbasic之如何消除浮动影响相关的知识,希望对你有一定的参考价值。

1.如果最终不需要显示父元素的边框,只需要处理对p的影响:

p{

    clear:left/right/both

}

以上可消除左浮动,右浮动,和两者都有时的影响,注意只能消除对叔叔辈的影响。

2.如果想消除对父元素的影响:

-在父元素内加一个空的块。

-在这个新块上clear

-原理?

因为新加进去的块没有浮动,依然占据流(此时新块也是没有高度的),对它clear会使它露出来(露出来的形式同p)

从而拉伸了流的高度,使得父元素有了高度

<body>
   <div id="d0">
     <div id="d1"></div>
     <div id="d2"></div>
     <div id="d3"></div>
     <!-- 消除浮动影响:消除浮动对父元素的影响 -->
     <div style="clear:left;"></div>
   </div>
   <p>浮动时看看我</p>
</body>

3.实例:照片墙

<!doctype html>
<html>
  <head>
     <meta charset="utf-8"/>
     <title>照片墙</title>
     <style>
        /*先刷墙*/
        body{
          background-color:#088;//设置背景墙为湖蓝色
        }
        /*再摆照片*/
        ul{
        width:780px; //设置ul(流)的宽度等于3个li的宽度,摆第4个的时候会自动换行
        margin:20px auto;
        border:1px solid red;
        /*去掉符号*/
        list-style-type:none;
        }
        li{
          width:218px;
          padding:10px;
          margin:10px;
          border:1px solid #ccc;//将每个li的边框设置的灰色
          float:left;//左浮动,实现照片的正序排列
          background-color:#fff;//将每个li的背景色设置为白色
        }//每一个li所占的宽度为:218+2*10+2*10+2*1=260
        p{
         text-align:center;//设置描述照片的文本居中
        }
     </style>
  </head>
  <body>
     <ul>
       <li>
         <img src="../images/01.jpg"/>
         <p>轻轻地我走了</p>
       </li>
       <li>
         <img src="../images/02.jpg"/>
         <p>正如我轻轻地来</p>
       </li>
       <li>
         <img src="../images/03.jpg"/>
         <p>我轻轻地招手</p>
       </li>
       <li>
         <img src="../images/04.jpg"/>
         <p>作别西天的云彩</p>
       </li>
       <li>
         <img src="../images/05.jpg"/>
         <p>那河畔的青柳</p>
       </li>
       <li>
         <img src="../images/06.jpg"/>
         <p>是夕阳中的新娘</p>
       </li>
     </ul>
为什么使用ul来做照片墙而不使用div?

用列表放相似的东西,它的渲染效率是最高的。
  </body>
</html>

以上是关于webbasic之如何消除浮动影响的主要内容,如果未能解决你的问题,请参考以下文章

使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

float的影响及清除float

网页布局之float

清除float浮动造成影响的几种解决方案

浮动的影响及如何清除浮动带来的影响

浮动布局所带来的影响以及如何清除浮动