zoukankan      html  css  js  c++  java
  • 浮动与清除浮动

    一、浮动(float:)

          首先再讲浮动之间我们先来弄懂什么是标准文档流?

          标准文档流在HTML中是指具有一定标签属性,且符合html语义的html文档,其微观表现是:1、空白折叠现象:比如当想让两个标签紧靠是中间不可有空格。2、高矮不齐时,默认底部对齐。3、满行会自动换行。

          其按标签分可分为:文本级和容器级。 按文档流可分为:块级元素和行内元素。

         然后今天要讲的主题中浮动便可是文档脱离标准文档流。

          浮动的影响有4种情况:

          其一:使元素脱离标准文档流。

          其二:浮动的元素相互紧贴。

          其三:浮动的元素会有“字围”效果,例如,让文字围绕在图片周围等。

          其四:浮动的收缩性,例如,若浮动没有设置宽高,其就会缩到内容的大小。

        另外,托标的元素不能把父元素蹭出高度。

     二 、   那么如何清楚浮动呢?

          其也有四种方法:

          1、 给浮动的元素的祖先元素加个高度这样就可以使祖先元素里的浮动  

          如下图:  加高之后:

    2、在下边元素中加clear:both;

    例:

    3、使用“隔墙法”,(很多技术大牛喜欢用”内墙法“)

    例:

    内墙法,则是把class=“cl h8”这个div、放到box1的里面的下面去,同样可以实现如上效果

    4、使用overflow:hidden;将浮动清除

    例:

    本文主讲的是清除浮动,而清除浮动的方法以这四种为主,欢迎大家增加,提意见,欢迎关注!

  • 相关阅读:
    nginx的url重写[rewrite规则和参考]
    nginx虚拟主机配置
    redhat 5下源码安装nginx服务
    apache服务器参数设置
    java实现全排列
    自定义栈类型,具有找到站内最小元素的min函数 ,且min(),pop(),push()函数的时间复杂度为O(1)
    如何学习一门新语言
    2018 中印诗人分享会
    C语言细节注意
    C++ vector 多次删除第一个元素
  • 原文地址:https://www.cnblogs.com/nihao-dong/p/5691991.html
Copyright © 2011-2022 走看看