DIV+CSS clear both清除产生浮动

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

clear 属性规定元素的哪一侧不允许其他浮动元素

1、clear语法:
clear : none | left|right| both

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

2、css结构
div{clear:left}
div{clear:right}
div{clear:both}

3、常用到的地方

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

4、例子

例子1

代码这样

因为每个商品都有浮动设置float:left,需要在后面清除浮动,将shop的外部盒子撑开来再后面

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

.clear{
clear:both;
}

例子2

DIVCSS5案例说明:这里设置一个css宽度css width)为500px;盒子,css边框css border)为红色,css背景css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度(css height)为150px。这样我们来观察案例效果,看浮动产生并使用clear清除浮动。

1、案例css代码

  1. .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
  2. .divcss5_left,.divcss5_right{
  3. border:1px solid #FFF;background:#999;width:200px;height:150px
  4. }
  5. /* css注释: 这里为了截图分别,对css代码换行 */
  6. .divcss5_left{ float:left}/* css注释: 设置浮动靠左 */
  7. .divcss5_right{ float:right}/* css注释:设置浮动靠右 */
 

DIV+CSS clear both清除产生浮动

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

接下来我们来认识与学习css clear知识与用法。

clear清除浮动目录
  1. clear语法与结构
  2. div clear常用地方
  3. css+div案例
  4. DIVCSS5总结

一、clear语法与结构   -   TOP

1、clear语法:
clear : none | left|right| both

2、clear参数值说明:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象

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

4、css结构
div{clear:left}
div{clear:right}
div{clear:both}

二、div clear常用地方   -   TOP

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

三、css+div案例   -   TOP

DIVCSS5案例说明:这里设置一个css宽度css width)为500px;盒子,css边框css border)为红色,css背景css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度(css height)为150px。这样我们来观察案例效果,看浮动产生并使用clear清除浮动。

1、案例css代码

  1. .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
  2. .divcss5_left,.divcss5_right{
  3. border:1px solid #FFF;background:#999;width:200px;height:150px
  4. }
  5. /* css注释: 这里为了截图分别,对css代码换行 */
  6. .divcss5_left{ float:left}/* css注释: 设置浮动靠左 */
  7. .divcss5_right{ float:right}/* css注释:设置浮动靠右 */

2、案例html代码片段:

  1. <div class="divcss5">
  2. <div class="divcss5_left">float left盒子</div>
  3. <div class="divcss5_right">float right盒子</div>
  4. </div>

3、案例效果截图

4、清除浮动方法

我们在css代码中加入CSS代码:

  1. .clear{ clear:both}

Html代码中“.divcss5”盒子</div>结束标签前加入代码:

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

最终使用div css clear清除浮动后应用用法案例截图

四、DIVCSS5总结   -   TOP

使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动,其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。

CSS ,浮动,clear记录,和一些转载别处的更多相关文章

  1. 经验分享:CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  2. css浮动--float/clear通俗讲解(转载)

    本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...

  3. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  4. 经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  6. 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. css浮动(float,clear)

    1. 以div元素布局为例,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流,是指标准流中的div. 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”,显然标准 ...

  8. (转)经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. (转)经验分享:CSS浮动(float,clear)通俗讲解

    文章转自:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身 ...

随机推荐

  1. ajax乱码解决总结

    第一,javascript沿用java的字符处理方式,内部是使用unicode来处理所有字符的,第二,utf-8是每个汉字(unicode字符)用3个字节来存储.第三,用utf-8来send数据是不会 ...

  2. 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  3. 被动信息收集1——DNS基础 + DNS解析工具 NSLOOKUP使用

    被动信息收集 特点: 基于公开渠道 与目标不直接接触 避免留下一切痕迹 标准參考--OSINT: 美国军方 北大西洋公约组织 名词解释 DNS--Domain Name System 域名系统 因特网 ...

  4. 简易推荐引擎的python实现

    代码地址如下:http://www.demodashi.com/demo/12913.html 主要思路 使用协同过滤的思路,从当前指定的用户过去的行为和其他用户的过去行为的相似度进行相似度评分,然后 ...

  5. 区分Activity的四种加载模式

    在多Activity开发中,有可能是自己应用之间的Activity跳转,或者夹带其他应用的可复用Activity.可能会希望跳转到原来某个Activity实例,而不是产生大量重复的Activity. ...

  6. 使用sql语句实现添加、删除约束

    --主键约束(Primary Key constraint):要求主键列的数据唯一,并且不允许为空. --唯一约束(Unique Constraint):要求该列唯一,允许为空,但只能出现一个空值. ...

  7. Android 升级ADT到22第三方Jar包导致的ClassNotFoundException和NoClassDefFoundError异常解决

    在使用异步载入框架Android-Universal-Image-Loader的Jar包的时候遇到错误: java.lang.NoClassDefFoundError:com.nostra13.uni ...

  8. jquery中Uncaught TypeError: $(...).ajaxUpload is not a function(…)错误解决方法

    错误原因:该函数不是jquery的核心函数,所以需要外部引入ajaxfileupload.js文件,可能是没有引入,或者引入的js文件互相冲突 解决方法:每次进入一个函数之前打印该函数所有的js文件, ...

  9. 设计模式中类的关系之实现(Realization)

    实现关系是用来描述接口和实现接口的类或者构建结构之间的关系,接口是操作的集合,而这些操作就用于规定类或者构建结构的一种服务. 在接口和类之间的实现关系中,类实现了接口,类中的操作实现了接口中所声明的操 ...

  10. UVA 1363 Joseph's Problem 找规律+推导 给定n,k;求k%[1,n]的和。

    /** 题目:Joseph's Problem 链接:https://vjudge.net/problem/UVA-1363 题意:给定n,k;求k%[1,n]的和. 思路: 没想出来,看了lrj的想 ...