清楚浮动的方法
清楚浮动的方法
拉普拉斯婷 发表于2年前
清楚浮动的方法
  • 发表于 2年前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: css学习笔记

清楚浮动的两种方法:

方法一:给float标签的父级标签添加overflow: hidden/auto属性 例如:

<!DOCTYPE html>
<html>
<head>
    <title>DIVCSS5实例 DIV与DIV覆盖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .boxa{overflow: hidden;}
        .boxa,.boxb{ margin:0 auto; width:400px;}
        .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
        .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
        .boxb{ border:1px solid #000; height:40px; background:#999}
    </style>
</head>
<body>
<div class="boxa"><!--方法一:给float标签的父级标签添加overflow: hidden属性-->
    <div class="boxa-l">内容左</div>
    <div class="boxa-r">内容右</div>
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>

方法二:在float标签的父级标签闭合之前添加标签,使用clear:both清楚浮动

<!DOCTYPE html>
<html>
<head>
    <title>DIVCSS5实例 DIV与DIV覆盖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .boxa,.boxb{ margin:0 auto; width:400px;}
        .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}
        .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}
        .boxb{ border:1px solid #000; height:40px; background:#999}
        .clear{clear: both;}
    </style>
</head>
<body>
<div class="boxa">
    <div class="boxa-l">内容左</div>
    <div class="boxa-r">内容右</div>
    <div class="clear"></div><!--方法二:在float标签的父级标签闭合之前添加标签,使用clear:both清楚浮动-->
</div>
<div class="boxb">boxb盒子里的内容</div>
</body>
</html>

方法三:借助给父级元素添加after伪类

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="Chomo"/>
    <link rel="start" href="http://www.14px.com" title="Home"/>
    <title>利用box-sizing实现div仿框架</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .parent{width: 300px; border: 1px solid;}
        .son{width: 20px; height: 20px; background: #EE4063; float: left;}
        span{float: right;}
        .clear:after{
            content: "."; /*添加句号*/
            height: 0; /*让高度为0,否则会撑大父级框*/
            visibility: hidden; /*让句号只站位不显示*/
            display: block; /*一定要块级框显示,否则撑不开*/
            clear: both;/*清楚浮动*/
        }
    </style>
</head>
<body>
<div class="parent clear">
    <div class="son"></div>
    <span>操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人操盘达人</span>
</div>
</body>
</html>
标签: 清楚浮动 float css
共有 人打赏支持
粉丝 0
博文 33
码字总数 5836
×
拉普拉斯婷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: