• 热身赛-任骏飞19分吴前18分 男篮蓝队主场击败伊朗 2019-09-16
  • 埃隆·马斯克 特斯拉8月将推出“全自动驾驶”功能 2019-09-15
  • 九江召开乡村振兴战略春风行动总结会议 林彬杨出席并讲话 2019-09-15
  • 十三届全国人大一次会议在北京闭幕 2019-09-09
  • 重庆黔江举行119消防文艺汇演活动 2019-09-07
  • 长子县全面推进“四好农村路”建设 2019-09-07
  • “海博会”宁夏旅游喜获最佳设计奖和最佳人气奖--旅游频道 2019-09-03
  • 紫光阁中共中央国家机关工作委员会 2019-08-29
  • 江西省“放管服”改革再出实招 2019-08-27
  • 今年一季度保险消费投诉高位运行 监管部门严查 2019-08-27
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

    DIV+CSS clear both清除产生浮动

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

    接下来我们来认识与学习香港买马资料大全 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结构
    香港买马资料大全{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. /* css注释: 这里为了截图分别,对css代码换行 */ 
    5. .divcss5_left{ float:left}/* css注释: 设置浮动靠左 */ 
    6. .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、案例效果截图

    float浮动产生与清除案例截图
    香港买马资料大全浮动产生与清除案例截图

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

    4、清除浮动方法

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

    1. .clear{ clear:both} 

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

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

    最终使用香港买马资料大全 clear清除浮动后应用用法案例截图

    使用clear清除浮动案例截图图文分析
    Clear使用用法案例截图

    扩展阅读CSS清除float浮动技巧 //www.ziixf.tw/jiqiao/j406.shtml

    四、DIVCSS5总结   -   TOP

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

    如需转载,请注明文章出处和来源网址://www.ziixf.tw/rumen/r424.shtml

    香港买马资料大全 www.ziixf.tw 如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    香港买马资料大全文章修订日期:2018-08-14 17:37 原创:香港买马资料大全
    本文香港买马资料大全 www.ziixf.tw DIVCSS5版权所有。

  • 热身赛-任骏飞19分吴前18分 男篮蓝队主场击败伊朗 2019-09-16
  • 埃隆·马斯克 特斯拉8月将推出“全自动驾驶”功能 2019-09-15
  • 九江召开乡村振兴战略春风行动总结会议 林彬杨出席并讲话 2019-09-15
  • 十三届全国人大一次会议在北京闭幕 2019-09-09
  • 重庆黔江举行119消防文艺汇演活动 2019-09-07
  • 长子县全面推进“四好农村路”建设 2019-09-07
  • “海博会”宁夏旅游喜获最佳设计奖和最佳人气奖--旅游频道 2019-09-03
  • 紫光阁中共中央国家机关工作委员会 2019-08-29
  • 江西省“放管服”改革再出实招 2019-08-27
  • 今年一季度保险消费投诉高位运行 监管部门严查 2019-08-27
  • 咱主张不由市场发挥全部作用,是因为市场受需求引导,而需求又分正义需求和邪恶需求。 2019-08-17
  • 纸质书电子书何必分高低 2019-08-17
  • 山东栖霞聚焦扶贫领域精准监督 现场质询跟踪督办 2019-08-16
  • 开发者回顾《最终幻想12》的游戏制作过程 2019-08-13
  • 中欧班列整车进口专列抵达西安港 2019-08-13
  • 打贵州麻将怎么算胡 100期蓝球走势图 重庆时时破译软件 亿博团队快三全天免费计划 重庆时时彩软件计划 得意黑龙江麻将绥化 三分钟开一次的时时彩 山东福彩群英会走势图 快速赛记录 下一批源计划皮肤