• 三种方法解决浮动元素父容器高度自适应问题


    浮动元素由于脱离了文档流,无法撑起其父元素的高度,如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种:

    方法一:让浮动元素后面紧跟一个用于清除浮动的空标签。完整代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>clearfix</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <style type="text/css">
    .area
    {background:#ccc;}/*定义父容器背景颜色,以便于观察*/
    .fl
    {float:left;background:#FFDF00;}
    .cb
    {clear:both;}
    </style>
    </head>
    <body>
    <div class="area">
    <div class="fl">floater</div>
    <div class="cb"></div>
    </div>
    </body>
    </html>

    缺点:增加了一个空标签,破坏了语义化。

    方法二:给父容器加上一个特殊的class,直接从父容器清除浮动元素的浮动。完整代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>clearfix</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <style type="text/css">
    .area
    {background:#ccc;}/*定义父容器背景颜色,以便于观察;定义宽度,使其在IE下高度自适应*/
    .clearfix:after
    {height:0px;visibility:hidden;content:".";clear:both;display:block;}
    .fl
    {float:left;background:#FFDF00;}
    .clearfix
    {display:inline-block;}/* 对Mac上的IE浏览器进行的处理 */
    * html .clearfix
    {height:1%}/* 对win上的IE浏览器进行的处理 */
    .clearfix
    {display:block;}/* 对display: inline-block;进行的修改,重置为区块元素*/
    </style>
    </head>
    <body>
    <div class="area clearfix">
    <div class="fl">floater</div>
    </div>
    </body>
    </html>

    方法三:在方法二的基础上进行改进。完整代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>clearfix</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <style type="text/css">
    .area
    {background:#ccc;width:960px;}/*定义父容器背景颜色,以便于观察;定义宽度,使其在IE下高度自适应*/
    .clearfix:after
    {height:0px;visibility:hidden;content:".";clear:both;display:block;}
    .fl
    {float:left;background:#FFDF00;}
    </style>
    </head>
    <body>
    <div class="area clearfix">
    <div class="fl">floater</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    iOS 添加微信分享
    IOS学习笔记——ViewController生命周期详解
    UI之CALayer详解(转)
    iOS CALayer讲解
    [leetcode] Minimum Path Sum
    [leetcode]Binary Tree Maximum Path Sum
    我是真的想去google啊
    C++ string 用法详解
    继续存博客
    bash中 2>&1 & 的解释
  • 原文地址:https://www.cnblogs.com/eecc/p/2221717.html
Copyright © 2020-2023  润新知