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、案例效果截图


css div浮动产生与清除案例截图

这个时候需要clear来清除浮动,让css命名为“divcss5”盒子撑开。

4、清除浮动方法

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

  1. .clear{ clear:both}

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

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

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


Clear使用用法案例截图

扩展阅读:CSS清除float浮动技巧 http://www.divcss5.com/jiqiao/j406.shtml

四、DIVCSS5总结   -   TOP

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

文章出处:http://www.divcss5.com/rumen/r424.shtml

[转]CSS clear both清除浮动的更多相关文章

  1. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

  2. CSS clear both清除浮动

    .clear{clear:both;} <div class="clear"></div>

  3. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. 关于clear与清除浮动

    今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...

  6. css技巧:清除浮动

    1.常用方法——overflow 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容 ...

  7. CSS给元素清除浮动影响的方法,--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. ife任务刷题总结(一)-css reset与清除浮动

    本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...

  9. 深入理解css系列:清除浮动

    如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...

随机推荐

  1. Spring常用注解总结(2)

    @Autowired "自动填装",作用是为了消除代码JAVA代码里面的getter/setter与bean属性中的property. @Autowired默认按类型匹配的方式,在 ...

  2. centos7安装zabbix server

    1.参照下列网址方法,打开端口:80,3306,443,22,10050,10051(可能实际不需要打开这么多) https://www.cnblogs.com/lw-2019forlinuxpyth ...

  3. Top值

    业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...

  4. 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...

  5. leetcode7:反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  6. CAS SSO单点登录实例

    1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...

  7. windows7 python3.4 安装scrapy

    首先升级pip 虽然提示说已经升级,但是查看版本还是发现不对,随即进入C:\Python34\Lib\site-packages 查看已经存在9.0.1的版本,怎么办?将其移除,重新升级 安装lxml ...

  8. 移动端使用fastclick时,模拟原生浏览器对象

    移动浏览器原生click事件有300ms的延时,这是浏览器为了区分到底是双击还是单击事件.(实际上有些移动浏览器不支持双击事件.PC版chrome在手机模式下,当禁止用户双击缩放页面时(即有viewp ...

  9. 【Selenium】【BugList7】执行driver.find_element_by_id("kw").send_keys("Selenium"),报错:selenium.common.exceptions.InvalidArgumentException: Message: Expected [object Undefined] undefined to be a string

    [版本] selenium:3.11.0 firefox:59.0.3 (64 位) python:3.6.5 [代码] #coding=utf-8 from selenium import webd ...

  10. 转 Java并发之锁的升级

    说明:本文大部分内容来自<并发编程的艺术>,再加上自己网络整理和理解 以下内容来自<java并发编程的艺术>作者:方鹏飞 魏鹏 程晓明 在多线程并发编程中synchronize ...