• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • ?
    欢迎来到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-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13