CSS中clear属性的both、left和right浅析

前端开发中，我们知道clear属性有none、both、left和right四个值。

它们的具体含义如下：

none：允许两边都可以有浮动对象；
both：不允许有浮动对象;
left：不允许左边有浮动对象;
right：不允许右边有浮动对象。

这里主要讨论both、left和right三个值。

要用到的CSS代码如下：

    <style type="text/css">.container{margin: 30px auto;width:600px;height: 300px;}.p{border:solid 3px #a33;}.c{width: 100px;height: 100px;background-color: #060;margin: 10px;}.fl{float:left;}.fr{float:right;}.cl{clear:left;}.cr{clear:right;}.both{clear:both;}</style>

一、普通浮动，无清除浮动，外容器塌陷：

DOM结构：

    <div class="container"><div class="p"><div class="c fl"></div><div class="c fl"></div><div class="c fl"></div></div></div>

效果图：

二、左浮动，clear:both清除浮动：

DOM结构：

    <div class="container"><div class="p"><div class="c fl">float left 1</div><div class="c fl">float left 2</div><div class="c both">clear both</div></div></div>

效果图：

三、右浮动，clear:both清除浮动：

DOM结构：

    <div class="container"><div class="p"><div class="c fr">float right 1</div><div class="c fr">float right 2</div><div class="c both">clear both</div></div></div>

效果图：

四、左右浮动，clear:both清除浮动：

DOM结构：

    <div class="container"><div class="p"><div class="c fl">float left</div><div class="c fr">float right</div><div class="c both">clear both</div></div></div>

效果图：

五、左浮动，清除左浮动，左浮动，未清除浮动的塌陷：

DOM结构：

    <div class="container"><div class="p"><div class="c fl">float left1</div><div class="c cl">clear float left</div><div class="c fl">float left2</div></div></div>

效果图：

六、右浮动，清除右浮动，左浮动，未清除浮动的塌陷：

DOM结构：

    <div class="container"><div class="p"><div class="c fr">float right</div><div class="c cr">clear float right</div><div class="c fl">float left</div></div></div>

效果图：

转载于:https://www.cnblogs.com/aaron-shu/p/4150009.html

CSS中clear属性的both、left和right浅析相关推荐

在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
html clear的作用,css中clear的作用是什么？
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
HTML5中margin属性应用,CSS中margin属性及其使用探究
本文向大家描述一下CSS中margin属性的用法,主要包括其属性,使用过程中会遇到的问题,以及一些高级应用等内容,相信本文介绍一定会让你有所收获. CSS中margin问题及使用 margin属性为C ...
overflow属性html5,什么是css中overflow属性
什么是css中overflow属性发布时间:2020-07-11 16:06:42 来源:亿速云阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...

CSS中clear属性的both、left和right浅析

CSS中clear属性的both、left和right浅析相关推荐

最新文章

热门文章