开发者社区> python进阶者> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一篇文章带你了解CSS clear both清除浮动

简介: 一篇文章带你了解CSS clear both清除浮动
+关注继续查看

一、前言

CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。

二、clear语法与结构

1. clear语法

clear : none | left|right| both

2. clear参数值说明

属性 描述
none 允许两边都可以有浮动对象
bot 不允许有浮动对象
left 不允许左边有浮动对象
right 不允许右边有浮动对象

3. clear解释

该属性的值指出了不允许有浮动对象的边情况,对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4. css结构  

div {
                clear: left
            }

            div {
                clear: right
            }

            div {
                clear: both
            }

三、div    clear常用的情况

最常用是使用clear:both清除浮动。

比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候就需要clear:both清除浮动。

四、案例

1. 案例说明

设置一个css宽度(css width)为500px;  盒子(div   ),css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度、css height为150px。

这样来观察案例效果,看浮动产生并使用clear清除浮动。

css代码:

.div css5 {
                width: 500px;
                background: #000;
                border: 1px solid #F00;
                padding: 10px
            }

            .div  css5_left,
            .div  css5_right {
                border: 1px solid #FFF;
                background: #999;
                width: 200px;
                height: 150px
            }
            /* css注释:这里为了截图分别,对css代码换行 */

            .div  css5_left {
                float: left
            }
            /* css注释:设置浮动靠左 */

            .div  css5_right {
                float: right
            }
            /* css注释:设置浮动靠右 */

html代码片:

<div  class="div css5">
            <div  class="div css5_left">float left盒子</div   >
            <div  class="div css5_right">float right盒子</div   >
        </div>

案例效果截图

2. 清除浮动方法

在css代码中加入CSS代码:

.clear{ clear:both}

Html代码中“.div   css5”盒子*结束标签前加入代码:

<div  class="clear"></div>

清除浮动效果图:

五、总结

本文基于Html基础,介绍了在实际开发中,可以使用clear可以清除float产生的浮动。在使用clear样式对象加入位置,只需要在此对象div标签结束前,加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动。采用代码加截图的方式,希望能够更好的帮助你学习。

想学习更多前端、Python爬虫、大数据等计算机知识,请前往:http://pdcfighting.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识
43 0
一篇文章带你了解HTML的网页布局结构
一篇文章带你了解HTML的网页布局结构
20 0
JavaWeb学习之路(6)--了解HTML之body标签
本文目录 1. 题外话 2. 关于标签 3. 学习一个重要标签`` 4. ``作用 5. 小结
48 0
AeroSpike踩坑手记1:Architecture of a Real Time Operational DBMS论文导读
又开了一个新的坑,笔者工作之后维护着一个 NoSQL 数据库。而笔者维护的数据库正是基于社区版本的 Aerospike打造而来。所以这个踩坑系列的文章属于工作总结型的内容,会将使用开发 Aerospike 的各种问题进行总结梳理,希望能够给予大家启发和帮助。
1687 0
一篇文章带你了解Gradle插件的所有创建方式
Gradle中插件可以分为两类:脚本插件和对象插件。 脚本插件 脚本插件就是一个普通的gradle构建脚本,通过在一个foo.gradle脚本中定义一系列的task,另一个构建脚本bar.gradle通过apply from:'foo.gradle'即可引用这个脚本插件。
1187 0
一文带你了解 TreeMap ,LinkedHashMap 的主要特点
必备知识点 一. Comparable , Comparator 这两个有什么不同? 可以看到一个是 java.lang 包的,一个是 util 包的。 代码如下,很明显, Comparable 属于 内部比较器, 而 Comparator 属于 外部比较器 。 外部比较器的好处 是我们可以有很多这种比较器,可以按排序的要求去选择 ,便于解耦。 而内部比较器也比较简单,只要实现了该 Comparable 接口就可以进行比较了。 class B implements Comparator<Integer>{ @Override public int com
21 0
+关注
python进阶者
专注于分享Python网络爬虫、数据挖掘、数据分析、数据处理、数据可视化、大数据、人工智能、云计算、机器学习等工具资源、热点资讯、相关技术文章、学习视频和学习资料等~~~ 该社区将不定期分享各种技术干货、学习资料等。关注我们,您收获的不只是知识,还有经验与人脉!
373
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载