zoukankan      html  css  js  c++  java
  • <css系列>之css--float总结

    一、float的历史

        float的设计初衷是实现文字环绕效果。

        如下图,对图片添加float,文字实现环绕效果。

        

    二、float特性

        1、包裹性,表现:收缩、坚挺、隔绝。具有包裹性的属性:display:inline-block/table-cell...;  position:absolute/fixed/;  

             a、收缩、坚挺:使得内容与本身大小相同,不会有多余的空间;

             b、隔绝(BFC):使用float后标签内部内容与外部无关。改变其外部样式不会对标签内部有影响,改变标签内部也不会对外部有影响,容器就像一个独立的行政单位。

            

        2、破坏性,表现:使父容器塌陷(为了实现文字环绕效果而导致的并非bug)

        

    三、清除父容器塌陷的方法

        底部clear

        1、clear:both/(left/right)

            both:不允许左右两边有浮动;

            left:不允许左边有浮动;

            right:不允许右边有浮动;

        2、.clearfix:after{}

            通常声明:

            .clearfix:after{

                   float:left/right;

                   position:absolute/fixed;

                   overflow:hidden/scroll;(IE7+)

                   display:inline-block/table-cell;(IE8)

                   width/height/zoom:......;(IE6/7)

            }

            简化后:

            .clearfix:after{

                   content:"";

                   display:table;(=display:block;height:0;overflow:hidden;)

                   clear:both;

            }(IE8+)

            .clearfix{

                   *zoom:1;

            }(IE6/7)

    四、float滥用

        1、浮动block化去空格

            按钮添加浮动前

            

           按钮浮动后就没有任何空格&nbsp;了,事实上并非空格去掉了,只是空格移动父容器内所有浮动元素最后

            

    五、浮动与布局

        1、文字环绕变身

        2、流体布局

  • 相关阅读:
    Linux 查看端口占用情况
    Linux 的 ls 和 ll 的使用方法:
    awk文本分析
    【Linux】/etc/passwd文件中字段解释
    vue学习笔记(八)---源码学习
    uniapp学习笔记(更新中)
    微信小程序学习
    哈希表的原理
    容器通常具备一些固定的方法
    字符串的方法
  • 原文地址:https://www.cnblogs.com/i-douya/p/5846422.html
Copyright © 2011-2022 走看看