zoukankan      html  css  js  c++  java
  • 子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;
    }
    

      

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

      

  • 相关阅读:
    适配器模式(16)
    状态模式(15)
    用反射技术替换工厂种的switch分支(14)
    2017年目标与规划
    抽象工厂模式(13)
    观察者模式(12)
    建造者模式(11)
    TCP 可靠传输与流量控制的实现
    TCP报文段的首部格式
    TCP可靠传输的工作原理
  • 原文地址:https://www.cnblogs.com/ganchuanpu/p/6221005.html
Copyright © 2011-2022 走看看