css清除浮动

kkkkzmt

于 2020-02-22 14:51:36 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/weixin_42668319/article/details/104442304

版权

Float浮动

特性：脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

产生浮动的原因

一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
情况如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:300px; border:1px solid green; }
    #box2{ width:100px; height:100px; background:red; float:left;} 
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

截图如：
本来红色对象盒子是在绿框盒子内，但对红色盒子使用了float浮动，导致绿框盒子不能撑开，这样浮动就产生了。
在这里插入图片描述

清除浮动原因

由于浮动产生，对周围的元素布局造成影响，浮动的元素也不能撑开父亲。

清除浮动方法

1. 解决上下排列的情况：

利用clear属性清除float浮动: clear : left /right / both(比较常用左右浮动都清除)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{ width:100px; height: 100px; background:red; float:left;}
    #box2{ width:100px; height: 100px; background:blue;clear: left;} 
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div> 
</body>
</html>

2.解决嵌套的情况

方法一：对父级设置适合CSS高度 :
给浮动的元素的父元素加上高度，清除浮动。但一般不推荐 , 不适合做自适应的效果，父元素高度由儿子撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:300px; height:300px;background: blue;}
    #box2{ width:100px; height:100px; background:red; float:left;} 
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

方法二：父元素浮动 :
给父元素加浮动，也不不推荐 , 因为父容器浮动也会影响到后面的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:300px;  background: blue;float:left;}
    #box2{ width:100px; height:100px; background:red; float:left;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

方法三： overflow : hidden 触发BFC规范 ,实现清除浮动效果
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:300px; background: blue; overflow: hidden;}
    #box2{ width:100px; height:100px; background:red; float:left;} 
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

方法四： after伪类 == 推荐==
注意：clear：both这个属性只能加给块标签，而after伪类添加内容默认是内联元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{ width:300px; background: blue; }
    #box2{ width:100px; height:100px; background:red; float:left;} 
    .clear:after{ content:""; display: block; clear:both;}
    </style>
</head>
<body>
    <div id="box1"class="clear">
        <div id="box2"></div>
    </div>
</body>
</html>

                                                     ------  by逆战班同学整理

kkkkzmt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动

css清除浮动Float浮动特性：脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。清除浮动原因由于浮动产生，对周围的元素布局造成影响，浮动的元素也不能撑开父亲。清除浮动方法1.- 解决上下排列的情况：利用clear属性清除float浮动: clear : left /right / both(比较常用左右浮动都清除)eg:`在这里插入...
复制链接

扫一扫