zoukankan      html  css  js  c++  java
  • 关于float样式

    在认识float样式之前务必要认识position:absolute

    position:absolute

    功能是:当前节点脱离文档流,对于其兄弟节点(即同一父节点下的节点)已经感觉不到他的存在(即他的位置已经被其兄弟结点占用了,即使他里面还有内容也不给腾位置,他就只能漂浮着)。他可以漂浮在其父节点所覆盖的区域的任何地方的上方。

    而float的功能与position:absolute的功能是类似的:

    float样式有四种值:left, right, inherit, none. 

    none:即默认值,即不使用float样式;

    inherit:继承父节点的float样式值;

    left,right表示漂浮在左边或者右边。这两个值使float具有类似于poistion:absolute的功能,该元素也是漂浮在其父节点所覆盖的区域内。也是脱离了文档流

    但有两点是不一样的

    1、他不能漂浮在父节点所覆盖的区域的任何地方,只能是在他原来所能在的位置的左边或者右边;

    2、虽然其他兄弟节点占了他的地方了,但只要他里面还有内容,其他兄弟节点还是要为他腾出位置给他使用(只要能够够他使用即可,其周边可让其兄弟继续使用),不能越雷池半步。

    3、基于第2点,如果其兄弟节点也设置了float为left或者right时,这时如果会出现在同一行上,但兄弟之间的内容又会覆盖到彼此,基于第2点原则,位于右侧的节点将被挤压至下一行。

    4、有一个点是需要注意的,但其兄弟节点也均设置了float为left或者right时(即都脱离了文档流),这时其父节点中的子元素都脱离了文档流,所以其父节点的高度为0.

  • 相关阅读:
    借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧
    IE兼容性问题
    php解析html类库simple_html_dom
    jquery 自定义类
    JS:收集的一些Array及String原型对象的扩展实现代码
    JS 替换
    JQ 取窗口的宽度.窗口的框度历
    java判断时间是否在时间段内 开始时间大于结束时间返回true
    bootstrap4 nav 菜单
    CSS样式居中 -webkit-background-size:center;background-size:center;
  • 原文地址:https://www.cnblogs.com/silentjesse/p/4360568.html
Copyright © 2011-2022 走看看