• 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:时时彩走势图后一 > DIV+CSS基础 >

    CSS基础必学列表

    CSS clear both清除浮动

    时时彩走势图后一 www.cuhw.com.cn 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.cuhw.com.cn/jiqiao/j406.shtml

    四、DIVCSS5总结   -   TOP

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

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

    我要分享到:

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

     

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    时时彩走势图后一文章修订日期:2013-03-05 16:05 原创:时时彩走势图后一
    本文时时彩走势图后一 www.cuhw.com.cn DIVCSS5版权所有。

  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 建好欧美同学会 助力伟大中国梦 2019-05-13
  • 看把你高兴的屁颠屁颠的,光有赞有什么用?我给你个货真价实的 [大红包]。 2019-05-13
  • 不动产登记全国联网 名下多少套房一查就知道 2019-05-13
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-12
  • 天津:社区志愿者织密村镇平安网 2019-05-12
  • 中央纪委紧盯“节点” 4年来通报曝光问题近4000起 2019-05-12
  • 遭受外来杨梅挑战 宁波宠果地产杨梅还能走多远 2019-05-11
  • 发达国家全这样,尊重个人的选择。[微笑][微笑] 2019-05-11
  • 第528期:你知道吗?二月份吃什么水果最适合 2019-05-11
  • 忻州召开“雪亮工程”建设现场会 2019-05-10