zoukankan html css js c++ java

css清除浮动方式总结

1.通过父元素overflow:hidden,缺点：超出部分隐藏，不推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .box{margin:50px;border:1px solid #ddd;overflow:hidden;}
        .left{float:left;}
        .right{float:right;}
    </style>
</head>
<body>
<div class="box">
   <div class="left">54</div>
   <div class="right">33</div>
</div>
</body>
</html>

效果：

方式2：添加空标签并设置clear:both，缺点是额外添加空标签，不推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .box{margin:50px;border:1px solid #ddd;}
        .left{float:left;}
        .right{float:right;}
        .slot{clear:both;}
    </style>
</head>
<body>
<div class="box">
   <div class="left">54</div>
   <div class="right">33</div>
   <div class="slot"></div>
</div>
</body>
</html>

方式3：通过伪类添加，既不会隐藏超出部分，又不多空标签，推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        .box{margin:50px;border:1px solid #ddd;}
        .box:after{content:'';display:block;clear:both;}
        .left{float:left;}
        .right{float:right;}
    </style>
</head>
<body>
<div class="box">
   <div class="left">54</div>
   <div class="right">33</div>
</div>
</body>
</html>

查看全文

相关阅读:
集合
 字典
 元组
 列表
 数字类型和字符串类型
 Python 数据类型
 jq的一点点
 常用到jq的ajax
上传
 下载

原文地址：https://www.cnblogs.com/hesj/p/10524259.html