码迷,mamicode.com
首页 > 其他好文 > 详细

清理浮动的方法

时间:2019-05-26 09:29:41      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:one   cfa   nbsp   ide   clear   wrap   ack   清理   float   

 浮动出现的原因:

        一开始浮动被创建的原因是为了实现报纸文字环绕图片的格式,如下图, 后来经过大家的学习研究后才发展出了后来的一系列功能。

技术图片

盒子浮动清理:

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        .wrapper{
            border: 5px solid salmon;
        }
        .wrapper .red{
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left;
            margin-right: 10px;
        }
    </style>
    <body>
        <div class="wrapper">
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </body>
</html>
未清理浮动前

技术图片

清理浮动的方法:

1、伪元素 ::after 

.wrapper::after{
    content: "";
    display: block;
    clear: both;
}

技术图片

2、触发BFC

     1)overflow:hidden;

.wrapper{
    overflow: hidden;
}

技术图片

     2) float:left/right  或者  position:fixed/absolute (父级元素会被内部改为 inline-block )

 技术图片

注意:在使用BFC清理浮动时,需要配合实际需要,只有实际情况允许的时候选择BFC才可以,比如:如果要求父级元素必须为 block时,就不可以用float 或者position ; 

3、块级元素style 添加 clear:both;(不推荐,这样会改变html结构)

     在wrapper 盒子内最下面加  <p style="clear: both;"></p>;

 

 

  

 

      

清理浮动的方法

标签:one   cfa   nbsp   ide   clear   wrap   ack   清理   float   

原文地址:https://www.cnblogs.com/xingyue525/p/10924906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!