• 子div设置浮动无法把父div撑开。


    <div class="mainBox">
      <div class="leftBox"></div>
        <div class="rightBox"></div>
        <div class="clear"></div>
    </div>
    

    注意:leftBox和rightBox设置浮动之后脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父div撑开。

    解决的方法:

    ①可以给父div也设置高度为300px,使页面中的leftBox和rightBox看起来“好像”还在原来的位置;
    ②定义一个类选择器,并设置clear:both;清除浮动,同时为了解决IE6中div有高度的问题可以增加属性height:0;overflow:hidden;
    
    .mainBox
    {
    	960px;
    	margin:0 auto;
    	background-color:#CFF;
    	overflow:visible;
    }
    .leftBox
    {
    	740px;
    	height:300px;
    	background-color:#C9F;
    	float:left;
    }
    .rightBox
    {
    	210px;
    	height:300px;
    	background-color:#FCF;
    	float:right;
    }
    .clear
    {
    	clear:both;
    	height:0;/*解决IE6下有高度的问题*/
    	overflow:hidden;
    }
    

      

    /*父元素不设置高度,子元素是有高度的,会把父元素撑开*/
    
    /*如果子元素设置浮动的话,就脱离了文档流,就不会把父元素撑开了*/
    
    /*因此,子元素设置浮动,父元素需要设置高度*/

      

  • 相关阅读:
    C# Enum设计和使用的相关技巧
    Bat文件编写
    js cookie操作
    Android use custom html tag in TextView
    Charset , Encoding
    Android View (transship)
    Android About ContentProvider
    android,create text file in sdcard
    Eclipse Shortcuts
    Common Terminology
  • 原文地址:https://www.cnblogs.com/ganchuanpu/p/6221005.html
Copyright © 2020-2023  润新知