css块级元素与浮动消除

最新推荐文章于 2021-08-03 23:36:38 发布

Wills * ManQi

最新推荐文章于 2021-08-03 23:36:38 发布

阅读量1.4k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_42417262/article/details/86376521

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

块级元素
这个名词有点东西，说实在的，我们可能不知道这个名字，但是她在css样式里有着举足轻重的地位，因为最常见的块级元素就《div》,其他的如《》，《table》（各位看官老爷注意一下，这个地方不是我有意打成《》，而是< >和特殊符号冲突显示不出来）。这一类标签最主要的特点就是水平流（水平方向上）上单独显示，多个块级元素则换行显示，还有他的板砖性质（就是他可以撑开你的div，当然要不做任何处理）
在这里插入图片描述
好，块级元素先说到这，我现在先说一个很头大的问题----浮动
什么是 CSS Float（浮动）？
这是个问题，简单点说，就是让元素向左或者向右（很有用的技能），所有许多宝宝就随便乱用，然后。。。页面爆炸。
咱们先看一个页面爆炸的实例：
先说一个背景：
你有两张非常棒的图片要把它并排放在页面上，所以你选择使用float来消除块级元素的换行性（简直完美），所以你在大脑里构思的效果是这样的：
在这里插入图片描述

<style>
        .container1{
            width:250px;
            height: 0px;/*板砖性质，自己撑开div，所以没设置*/
           background-color: #1E9FFF;
            border:darkorange 5px solid;

        }
        .div2{

            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div3{

            width: 100px;
            height: 100px;
            background-color: #5FB878;
            float: left;
        }
        .container2{
            width:250px;
            height: 100px;
            background-color: #009f95;
            border:lightgreen 5px solid;
        }
    </style>
</head>
<body>
<div class="container1">
    <div class="div2">
       图片1
    </div>
    <div class="div3">
        图片2
    </div>
</div>
<div class="container2">

</div>

很好，简直天衣无缝的。。。爆炸！！
在这里插入图片描述
这会你就有点急了，很显然，上面的那个container因为没有设置宽度而“扁了”，而下面的container则就被你的两张图片盖着一样。下面咱们分析一下问题的所在。
总结一下：
float（浮动）是将一个块或者别的什么东西浮起来，这就像一缸水，被float的块状元素就像落在水缸水面的叶子一样浮在上面，他根本没用进入水中，自然不会进入你的container1，而且还盖着你的container2，这样说是不是好理解一些。
既然问题已经明了了，那接下来就是解决问题了
NO.1
既然叶子没有进入水中，那我干脆把container1扩大一点，让你把container1盖着好了。
emmmmmm。。。这是一种方法，但是只是亡羊补牢的方法，而且在将来的布局中你不可能精确计算具体尺寸，很有可能顾此失彼，这一块的布局可以了，它周围的元素因为各种原因被挤开了，所以这种方法不可取。
NO.2
通过设置父元素 overflow 或者display：table 属性来闭合浮动，给box1添加overflow：hidden（说实在的，这个确实是比第一个好了一些，但是还是不实用，毕竟父元素有时候不是那么好找
NO.3
(疯狂安利）
使用伪元素：after,下面是代码，给box1添加上clearfloat这class即可

HTML：
<div class="box clear">
    <img src="/images/common/l/1.jpg">
</div>
CSS：
.box {
    padding: 10px;
    background-color: #cd0000;
}
.box > img {
    float: left;
}

.clear:after {
    content: "";
    display: '';//这里可以选择table，block，但是最好不要选择list-item
    clear: both;
}

以上代码来之css世界
添加链接描述
所以，通过伪元素的方法可以完美解决浮动问题
好了，这里解释一下为毛最好不要用list-item
简单点说，就是不美观，因为因为list-item的特性，会在每行开始前加上一个“.”（emmm，怎么在下面，不是在中间）

在这里插入图片描述

就是下面的那个小黑点，至于为什么会出现这个小黑点，那就是另一个故事了！！！
写完收工！！！

Wills * ManQi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css块级元素与浮动消除

块级元素这个名词有点东西，说实在的，我们可能不知道这个名字，但是她在css样式里有着举足轻重的地位，因为最常见的块级元素就《div》,其他的如《》，《table》（各位看官老爷注意一下，这个地方不是我有意打成《》，而是&amp;amp;lt; &amp;amp;gt;和特殊符号冲突显示不出来）。这一类标签最主要的特点就是水平流（水平方向上）上单独显示，多个块级元素则换行显示，还有他的板砖性质（就是他可以撑开你的div，当然要...
复制链接

扫一扫