css的浮动问题的解决方法

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height

性。会导致盒子高度的塌陷.

清除浮动是一个前端开发人员必须掌握的技巧

1.固定高度法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        /*可以为父标签设定一个高度, 这里就为父元素设置了高度防止了浮动影响和塌陷的问题*/
        #box1 {
            height: 100px;
        }
        #box1 div {
            float: left;
            width: 100px;
            background: red;
            height: 100px;
        }
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box1">
    <div></div>
</div>
<div id="box2"></div>
</body>
</html>

2外墙法

在两个盒子之间防止一个div,设置clear属性为both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box1 div {
            float: left;
            width: 100px;
            background: red;
            height: 100px;
        }
        /*这是外墙*/
        #wall{ 
            height: 0;
            clear: both;
        }
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box1">
    <div></div>
</div>
<div id="wall"></div>
<div id="box2"></div>
</body>
</html>

但是有个问题,会导致上面的盒子下外边距失效,要设外边距只能通过下面的盒子去设定

3内墙法

和外墙法差不多,只是在第一个盒子的尾部放置一个div,设置清除浮动的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box1>#float {
            float: left;
            width: 100px;
            background: red;
            height: 100px;
        }
        #wall{
            height: 0;
            clear: both;
        }
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="float"></div>
    <div id="wall"></div>
</div>
<div id="box2"></div>
</body>
</html>

4overflow 清除法
在父元素设置一个overflow为hidden或者auto属性就都以.;其实就是bfc,bfc容器就会导致大家河水不犯井水,除了overflow,position不为relative,float,display为inline-block,table-cell都是可以形成bfc容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box1 {
            overflow: hidden; /*这里设置了overflow就会防止因为盒子浮动*/
        }
        #box1 #float {
            float: left;
            width: 100px;
            background: red;
            height: 100px;
        }
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="float"></div>
</div>
<div id="box2"></div>
</body>
</html>

这个方法很简单,也是我比较喜欢用的一种办法

5通过css3的伪类选择器添加一个外墙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box1::after {
            display:block;
            clear:both;
            content:"";
            visibility:hidden;
            height:0
        }
        #box1 #float {
            float: left;
            width: 100px;
            background: red;
            height: 100px;
        }
        #box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="float"></div>
</div>
<div id="box2"></div>
<script>
</script>
</body>
</html>

这个比较常用,而且兼容性也不错

6还有一个是5方法的加强版

#box1::after {
            clear:both;
            content:"";
            display:table;
        }

css的浮动问题的解决方法

推荐阅读更多精彩内容