css浮动与清除浮动

最新推荐文章于 2024-04-29 16:58:49 发布

sdbxpjzq

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量482

点赞数

分类专栏： CSS 文章标签：浮动-清除浮动

本文链接：https://blog.csdn.net/sdbxpjzq/article/details/50472074

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浮动元素的width

若一个块级元素使用 float , 此时不给固定 width,默认是内content 撑开,并不是独占一行 。

浮动时的文字显示位置

<style type="text/css">
            *{margin: 0;padding: 0;}
            .box1{
                width: 100px;height: 100px;
                border: 1px solid red;
                background: green;
                float: left;
            }
            .box2{
                width: 100px;height: 100px;
                background: red;
                /*float: left;*/
            }
        </style>
    </head>
    <body>
        <div class="box1">hello</div>
        <div class="box2">world</div>
    </body>

注意world的位置

清除浮动的方法

首先理解什么是清除浮动
我的理解是: 清除自身两边元素float 之后,对自己产生的影响.
首先来个一线互联网推荐的方法

推荐方法

给父元素添加类 (clear)

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

至于为什么会使用zoom:1; 主要是触发 haslayout, 支持IE低版本浏览器.
关于haslayout和BFC 以后对进行讨论.

设置height属性
给父元素使用float属性
在父元素的最后加<br clear="all"
**在父元素的最后加<div style="clear:both"

sdbxpjzq

关注

0
点赞
踩
0

收藏

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

浮动元素的width若一个块级元素使用 float , 此时不给固定 width,默认是内content 撑开,并不是独占一行。浮动时的文字显示位置<style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 100px;height: 100px;
复制链接

扫一扫