浮动带来的问题

html代码

<div class="topDiv">
        <div class="floatDiv">①floatDiv</div>
        <div class="Second">②textDiv</div>
    </div>
    <div class="bottomDiv">③bottomDiv</div>

css代码

.topDiv {
    width: 500px;
    border: 1px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    color: red;
    margin: 4px;
    float: left;
}
.Second {
    color: orange;
    border: 1px solid orange;
}

.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 1px solid green;
}

浮动1.png

1.文字围绕浮动元素排版，但我们可能希望文字（.textDiv）排列在浮动元素下方，或者，我们并不希望.textDiv两边有浮动元素存在。

2.浮动元素排版超出了其父级元素（.topDiv），父元素的高度出现了塌缩，若没有文字高度的支撑，不考虑边框，父级元素高度会塌缩成零。

1.利用clear

clear:left;

2.1.png

clear后的效果

2.11.png

2.父元素结束标签之前插入清除浮动的块级元素

var div = document.createElement('div')
    div.style.clear = 'both'
    document.getElementsByClassName('topDiv')[0].appendChild(div)

插入后的效果

2.2.png

3利用伪类

写一个clearfix伪类，清除浮动

 <div class="topDiv clearfix">
        <div class="floatDiv">①floatDiv</div>
        <div class="Second">②Second</div>
    </div>
    <div class="bottomDiv">③bottomDiv</div>
.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

得到的效果 2.32.png

4.利用overflow清除浮动

利用overflow清除浮动

.topDiv {
    width: 500px;
    border: 1px solid black;
    clear: left;
    overflow: auto;
}

成功解决浮动问题

2.41.png

清除浮动也许有四种方式