float : left | right | none
设计之初的作用是做文字环绕
p标签段落双标签块级
img标签图片单标签行级
src=““图片地址
alt=““图片的文字描述（不能省略不写）
浏览器在搜索图片的时候，爬虫会根据alt里面的文字描述将图片显示在页面上，有时候文字描述与图片不一致，会给爬虫造成误导，导致出现与搜索内容不一样的图片
1、文字环绕
图片浮动在最左边，文字环绕图片
代码2、设置float元素，会脱离文档流，往设置的方向进行浮动，自己到遇到父级的边界或者其他的浮动元素，就会停止，浮动的元素会脱离文档流
黄色右浮动从上面三个例子，我们可以看出，元素在设置浮动以后，会相对于自己原来的位置进行左浮或右浮，我们看到红素方块在最上面，它右浮之后就显示在父级最右最上方，黄色方块本来在中间位置，右浮之后会相对于自己原来位置向右浮动，因此会显示第三张图片的位置。
当红色向左浮动，那么红色会脱离文档流，不占位置，黄色和绿色就会向大盒子的左上角移动，实际上黄色被红色覆盖在下面
3、浮动的元素不占空间
我们在给外面的大盒子不设置宽高的时候，再将里面的三个小盒子自上而下放置，会显示如下，我们发现，大盒子的宽高由里面内容来决定
下面这个我们给大盒子设置高度为0，再将里面三个小盒子设置左浮动，会显示如下，内容撑不开盒子，所以说，浮动元素不占空间
4、利用浮动可以设置我们常见的两种布局
（1）、一端固定一端自适应布局
一端固定一端自适应通常这种我们可以将左边部分设置宽高和float：left，右边部分设置margin-left，宽度由父级决定，就能达到常见的这种布局。
（2）、两端等宽中间自适应布局 （圣杯布局/双翼布局）
两端等宽中间自适应
像这种布局我们可以设置左边黄色和右边黄色等宽等高，一个左浮一个右浮，，中间红色区域设置margin-left和margin-right,min-width,中间部分会根据浏览器窗口大小自适应。
5、浮动元素会找对应的浮动元素，紧跟在同向的浮动元素的后面。
6、浮动属性对块级元素的影响：
（1）块级元素的宽度不再跟随父级的宽度，而是由内容决定（内容撑开宽高）
（2）行级元素设置·浮动之后就可以设置宽高以及盒模型
7、清除浮动的方法
（1）给父元素设置宽高。
这种方法可以防止父级塌陷，简单粗暴，一般用的极少。
（2）在父元素里面的最后添加一个元素并设置clear：both
相关代码我们没有给父级设置高度，正常情况下父级高度会在里面元素全部浮动以后产生塌陷，这里我们在最后写了一个元素并设置了clear：both,它就想躲开浮动元素，就会跑到浮动元素的后面，父级向包裹住它，就会自然的撑开宽高。但是这种方法会使html文档中出现很多这样没有意义的元素，写起来太麻烦，而且不合语义化。
（3）伪元素清除浮动
我们可以使用::after在元素的后面虚拟出来一个伪元素，添加一个clearfix类，这样我们在需要清除浮动的时候，只需给父元素添加一个clearfix类就可以了。
.clearfix::after {
content:"";
display:block;
height:0;
clear:both;
}
这样利用伪元素就能避免html文档中出现没有意义的元素了，通常为了IE的兼容性，后面还会写
.clearfix {
zoom:1;
}
(4)给父元素设置overflow：hidden；
首先我们了解一下BFC块级格式化上下文：
所以我们给父级元素设置值overflow：hidden后，就可以让浮动的元素参与高度计算，这样父元素就有高度了。
网友评论