• 选学校
  • 高中毕后选择什么学校好
  • 启蒙星
  • 北大青鸟课程介绍
  • 北大青鸟助你走上高级软件工程师修炼之路
  • 转行不是梦,学北大青鸟IT培训
  • 北大青鸟辉煌12年
  • 株洲北大青鸟校区升级

您现在的位置:株洲北大青鸟 >> >> 师资力量>> 技术天地

师资力量
开班信息
输入姓名手机号码预约试听课程
姓  名:*
手机号:*
创业摇篮班
开班日期:10月15日
招生人数:25
就业直通班
开班日期:10月31日
招生人数:25
就业精英班
开班日期:9月13日
招生人数:已满
技术天地
  • 清除浮动的子元素
  • 〖不上名牌大学,就读株洲北大青鸟〗 发布人:株洲北大青鸟
  • 发表日期:2013/5/30 10:13:43 阅读数:73  
  •  
  • 在利用浮动进行布局时,不免会遇到一些问题。例如,当一个元素的所有子元素都浮动时,该元素的高度会变为零,这将破坏整体布局或导致该元素的背景不能正常显示。

    该问题的解决方法有很多,但最常见的方法有三种,这里将一一说明。在讨论这三种方法时,将以一个双栏布局为例,使用的HTML代码结构如下所示。

    <div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    </div>

    从HTML结构上看,#content和#sidebar分别代表着内容栏与侧边栏。为说明问题,这里将使用浮动创建双栏布局,其样式规则如下所示。

    #main {
    width: 950px;
    background-color: red;
    }
    #content {
    width: 600px;
    float: left;
    }
    #sidebar {
    width: 350px;
    float: left;
    }

    在这段样式规则中,值得注意的是#main的背景色被设置成红色。但由于#content和#sidebar被设置为浮动,#main的红色背景将无法正常显示。刚刚提到到,对于这种情况,有三种解决方法,现在将分别进行探讨。

    第一种方法是以毒攻毒,即使用浮动(将父元素#main设置为浮动)来解决该问题,其样式规则如下所示。

    #main {
    width: 950px;
    background-color: red;
    float: left;
    }

    通过浮动#mian使得问题得到很好的解决,但该方法同时隐藏着一个问题,就是又新增一个浮动元素,这意味着有可能不得不去处理另一个浮动元素。

    第二种方法是在#mian中新增一个非浮动元素,并将其放置在#main的末尾,HTML代码如下所示。

    <div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div style="clear: both;"></div>
    </div>

    通过向#main中添加一个非浮动块级元素,并将其style属性值设置为clear: both;,问题得到解决。该方法没有副作用,唯一不足的是增加一行没有实际意义的代码。

    第三种方法衍生自第二种方法,同样是在#main末尾新增一个非浮动元素,但不是修改HTML代码,而是使用样式规则生成新增的非浮动元素。该方法需要结合使用:after伪元素content属性,其样式规则如下所示。

    .clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
    }
    .clear-fix {
    +height: 1%;
    }

    该方法被称为简易清除工具,使用时只需将#main的class属性值设置为clear-fix即可,其HTML代码如下所示。

    <div id="main" class="clear-fix">
    <div id="content"></div>
    <div id="sidebar"></div>
    </div>
上一篇:自定义委托和事件实现窗体数据同步更新
下一篇:TCP/IP、Http、Socket的区别
分享到:

版权所有 ©株洲健坤科技职业培训学校    学校地址:株洲市天元区黄山路205号健坤大厦(天元区消防中队对面)

咨询报名热线:400-8812-866    邮箱地址:4008812866@b.qq.com   备案号: 湘ICP备10202015号  

北大青鸟学费是多少 湖南北大青鸟怎么样
株洲北大青鸟好不好 株洲北大青鸟学费多少 株洲北大青鸟学校这么样
秒速时时彩走势