美文网首页
浮动的理解

浮动的理解

作者: 在彼处 | 来源:发表于2018-11-25 11:25 被阅读0次

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

设置浮动之后,元素脱离标准文档流,元素顶部与之前的上一个标准流中元素底部对齐

假如我们只把div2、div4左浮动

依然是根据结论,div2、div4浮动,脱离了标准流,因此div3将会自动上移,与div1组成标准流。div2发现上一个元素div1是标准流中的元素,因此div2相对垂直位置不变,与div1底部对齐。div4发现上一个元素div3是标准流中的元素,因此div4的顶部和div3的底部对齐,并且总是成立的,因为从图中可以看出,div3上移后,div4也跟着上移,div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

float属性详解:

使用clear属性的时候要记住:clear只对元素本身的布局起作用。

浮动详解

相关文章

  • 浮动的理解

    http://www.cnblogs.com/iyangyuan/archive/2013/03/27/29838...

  • 浮动的理解

    关于浮动,一直存在一些误解 一,浮动是什么 首先需要了解下文档流,普通文档流中,元素是按照从上到下,从左到右的顺序...

  • 浮动理解

    在理解浮动的概念,边看边动手做一下: 为什么? div4在使用float属性之后不是直接水平移动到最左端,而是先向...

  • 浮动盒子的理解

    除了块盒和行盒,还有一种盒子,就是行块盒(display:inline-block),这种盒子结合了行盒和块盒的特...

  • 我理解的浮动与闭合浮动

    1.什么是浮动:CSS中定位的一种。 CSS的定位有:文档流(普通流),浮动,绝对定位 2.为什么我们要清除浮动(...

  • H5前端开发学习笔记——0x15清除浮动

    清除浮动 课时130 浮动元素高度问题(掌握) 课时131 清除浮动方式一(理解) 课时132 清除浮动方式二(理...

  • H5前端开发学习笔记——0x14浮动

    浮动 课时121 网页布局方式(掌握) 课时122 浮动流基本概念(掌握) 课时123 浮动元素脱标(理解) 课时...

  • 对浮动的初步理解

    浮动(float),一个利于布局又影响布局的属性,先看下w3c上的解释 A float is a box that...

  • 理解CSS中的浮动

    浮动(float)是CSS中一个重要的定位及布局属性,float 属性可以接受以下几个值: none :元素不浮动...

  • 如何理解css浮动以及清除浮动

    偶然间在博客园看到一篇非常棒的讲解浮动与清除浮动原理的文章 This is CSS清除浮动 link.

网友评论

      本文标题:浮动的理解

      本文链接:https://www.haomeiwen.com/subject/nxfjsftx.html