html位置如何clear,html-float和clear

*注：本篇观点来自https://blog.csdn.net/xcymorningsun/java/article/details/53432913

首先，div是块级元素，标准流中的div在页面中独占一行

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

假如让2浮动起来，他就会脱离标准流，所有3会向上移动，占据2的位置

可以看出3变短了，2挡住了一部分3，此时的2不属于标准流，1，3，4竖直排列

这里2的浮动用的是左浮动(float: left;)，这里的靠左、靠右是说页面的左、右边缘。

如果2采用右浮动

如果让1和2都左浮

可以看出1和2连在一起，这里也可以看出：

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

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后。

为了方便理解可以使2，3，4全部浮起来，如图：

这样1属于标准流，2紧跟1，且垂直排列，3，4紧跟2，且横向排列，由于是左排列，所以2排在左边第一位，3，4顺位。

如果把2，3，4设为右排列，即

综上，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

清除浮动可以理解为打破横向排列。

清除浮动的关键字是clear，官方定义如下：

语法：

clear : none | left | right | both

取值：

none  :  默认值。允许两边都可以有浮动对象

left   :  不允许左边有浮动对象

right  :  不允许右边有浮动对象

both  :  不允许有浮动对象

定义太模糊，举几个例子来进一步说明

假如只有1，2左浮

1和2会并排横向排列，但是如果在他们浮动的前提下又不让他们横向排列，就可以用到clear,想让上图变成这样

可能有人想到清除1右边的元素，即(clear：right)但是如果这么写根本没有效果，因为clear只会影响使用清除的元素本身，不能影响其他元素。

也就是说如果想让1和2竖直排列，如果想让2移动但是在1中使用了移动样式，这是没有用的，因为他只能影响1，所以解决办法就是在2的css样式中使用clear:left；来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

当然假设1和2都是右浮，同理，在2的css样式中使用clear:right;

标签：浮动,排列,float,clear,元素,标准,html,div

来源： https://www.cnblogs.com/-sefd/p/12822682.html