DIV CSS使用float属性导致其他元素错位的原因及解决方案

直接上解决方法，有兴趣知道原理的就看一下下面的内容哈。
解决方法：

1、如果两个同级的元素发生了错位，就在两个元素之间添加一个空标签，比如:

<div class="clear"></div>

然后设置CSS属性：

.clear{
    clear:both;
}

2、如果是父子元素，而只给子元素添加了float，而父元素没有加float的话，会发生元素塌陷，解决方法：
(1)给父元素也加上相同的float就行。
(2)在父元素标签里面的最后一行加上上面那串代码。

如果是浮动引起的原因，这样子一般可以解决大多数问题。

下面是一些原理~

正常的文档流

我们先来看一下不使用float属性的文档布局是怎么样的。

普通的块级元素：
float属性使用后导致元素错位或塌陷的原因及解决方案
对应的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .block{
            width: 200px;
            height: 30px;
            background-color: yellow;
            margin-bottom: 4px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
        <div class="a">
            <div class="1 block">1</div>
            <div class="2 block">2</div>
            <div class="3 block">3</div>
        </div>
        <div class="b">
            <div class="4 block">4</div>
            <div class="5 block">5</div>
            <div class="6 block">6</div>
        </div>
</body>
</html>

使用了float会怎么样？

块级元素：
float属性使用后导致元素错位或塌陷的原因及解决方案

对应CSS代码：    
其他和上面的一样，唯一不同的地方就是
给block类添加了 float:left;属性

这样子添加了这个属性的元素就会往左边贴紧排列，一直排到当前行的位置满了，然后再从下一行开始排列。利用这样的属性可以满足我们许多的排版需求…

但是！重点来了。使用了float属性之后的元素会脱离正常的文档流。这很抽象，所以我画了个图来帮助理解。
float属性使用后导致元素错位或塌陷的原因及解决方案

这些脱离了文本流之后，如果再往里面添加元素，就会发生下面这种情况。
我给黄色的元素添加了透明的效果，这样就可以看得到下面绿色那块的元素其实有一部分是跟黄色的元素重叠的。
float属性使用后导致元素错位或塌陷的原因及解决方案

这是因为黄色的元素跟绿色的元素不在同一层，这样子可以达到某种效果，但大多数情况下我们并不想让它这样子，那该怎么办呢？

1、让绿色的元素也浮动，跟黄色的元素在同一层排列。
这样的话就直接给绿色的元素添加float属性就可以了

2、清除浮动
这个方法有很多，我经常用的就是在黄色元素和绿色元素之间添加一个
div（我命名为clear）,然后设置以下属性即可。

HTML：

        <div class="a">
            <div class="1 block">1</div>
            <div class="2 block">2</div>
            <div class="3 block">3</div>
        </div>
        <div class="b">
            <div class="4 block">4</div>
            <div class="5 block">5</div>
            <div class="6 block">6</div>
        </div>
        <div class="clear"></div>
        <div class="c">C</div>

CSS：

        *{
            margin:0;
            padding:0;
        }
        .block{
            width: 200px;
            height: 30px;
            line-height: 30px;
            background-color: rgba(255,255,0,.6);
            margin-bottom: 4px;
            border: 2px solid black;
            float:left;
        }
        .c{
            width: 200px;
            height: 200px;
            background-color: green;
            text-align: center;
            color: white;
            float: left;
        }
        .clear{
            clear: both;
        }

float属性使用后导致元素错位或塌陷的原因及解决方案
或者用添加伪类的方式也行，网上有很多解决方案，不同的方式各有优劣。

float属性使用后导致元素错位或塌陷的原因及解决方案

DIV CSS使用float属性导致其他元素错位的原因及解决方案

正常的文档流

使用了float会怎么样？

相关推荐