Question

CSS中浮动的原理和规则

Answer 1

任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

注意：

Answer 2

1. 浮动都是相对于父层的定位，浮左或者浮右；

2. 一旦使用了浮动，那么它就不会占用父层的空间，也就是会出现——父层高2px，内容却有几百px（只是举个例子，具体看情况而定），一般给父层加一个overflow: hidden就能搞定

3. 使用浮动一般都是同级元素都会使用浮动，否则很容易出现覆盖，溢出等情况，这些情况虽然也能通过定位移动解决，但是对于响应式布局效果并不好，所以浮动一般都是针对——我的同级元素都是浮动的或者只有我一个
   

Answer 3

css浮动和定位还有盒子模型，写几个案例理解就可以的啦，

Answer 4

float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。
CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了float属性的元素会从普通文档流中脱离，相当于不占据任何空间，所以文档中普通流中的元素表现的就像浮动元素不存在一样，因此，设置float属性的后会影响我们的页面布局。具体说来就是：让block元素无视float元素，让inline元素像流水一样围绕着float元素实现浮动布局。
float属性设计的初衷：仅仅是让文字像流水一样环绕浮动元素。