由float引发的思考

lemon 发布于2019-08-30 14:07 / 3162人阅读

摘要：需要注意的是网上说的清楚浮动原理和这个一样当然清楚浮动还有另外一种方式原理是触发浮动元素的父元素形成块级格式化上下文亦即

最近工作中不时会遇到float使用问题,由于CSS是一系列属性叠加的结果,float经常会和BFC,外边距折叠等一起出现,故而原本简单的问题却让人老是觉得迷糊,本文记录一下float的使用以备日后查阅.
首先我们来看一下最基本的代码:





    
    
    
    Document

上述代码是一个div内有两个子div,由于div是块级元素,所以children1和children2会上下排列:

首先我们给children2加上一个左浮动样式,即把CSS样式更改如下:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: left;
        }

显示结果如下:

上图中,由于children2(蓝色方块)增加了浮动样式,浮动样式不是正常的页面流,是独立定位的.所以parent块只包含了children1(红色方块),children2就超出了父元素.

上面我们是给children2加上了左浮动,假若我们是给children1加上了左浮动呢?

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
        }

显示结果如下:

上图中因为children1(红色方块)设置了浮动样式,且浮动元素z-index级别高于普通元素,所以它会在children2(蓝色方块)上面显示.

通常浮动元素会引起父元素高度塌陷,例如当我们把CSS文件改成下面这样的时候:

 #parent {
            padding: 10px;
            border: 3px solid black;
            background-color: green;
        }
        
        #children1 {
            width: 80px;
            height: 80px;
            background-color: red;
            margin-top: 10px;
            float: left;
        }
        
        #children2 {
            width: 80px;
            height: 80px;
            background-color: blue;
            float: right;
        }

显示结果如下:

为了清楚浮动,我们可以在parent块中增加一个子块,并添加如下样式:

 #children3 {
            width: 80px;
            height: 80px;
            background-color: orange;
            clear: both;
        }

此时显示结果如下:

这样一来就可以清楚浮动了,原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。需要注意的是,网上说的clearfix清楚浮动原理和这个一样.
当然清楚浮动还有另外一种方式,原理是触发浮动元素的父元素形成块级格式化上下文,亦即BFC.

GPU云服务器云服务器人工智能的思考对人工智能的思考人工智能由谁提出的由汇编语言写的程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115785.html

由重构react组件引发的函数式编程的思考

摘要：对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在我的博客下面留言最近在重构组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在我的博客下面留言最近在重构react组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。一般情况我们编写一个react组件大致样子如下： class ...

leone 2019-08-20 18:23 评论0 收藏0
由一个问题引发关于对象和对象子类型的思考

摘要：答案核心对象和对象子类型先看一段解释第一个代表对象。第二个代表对象子类型。那么问题来了，什么是不严谨的说，中的所有，都是由对象衍生出来的对象子类型包括，和。问题：如题 var obj=new Object(); Object.prototype.toString.call(obj);// [object Object] var arr=new Array(); Object.pro...

hatlonely 2019-08-21 17:05 评论0 收藏0
由文件导出乱码引发对字符编码的思考

摘要：参考的资料前辈们已经对字符编码讲的很好了，通俗易懂。字符编码的诞生是人类对科学技术妥协的结果。字符编码为什么有很多方式。这是从计算机层面总体上对字符编码的认识。中的一些字符集字符编码知识以前在工作中遇到导出中文乱码时，就google一下，看见把utf-8编码换成GBK之类的编码，导出在Excel中打开就不会乱码了。只是解决了当前问题。对字符编码没有很好的认识。这次又遇到了，遂记录之。...

longmon 2019-07-01 14:00 评论0 收藏0