浮动是css里面布局最多的一个属性，也是很重要的一个属性。css
float：表示浮动的意思。它有四个值。html
看一个例子前端
html结构：linux
<div class="box1"></div> <div class="box2"></div> <span>路飞学城</span>
css样式：web
.box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; }
咱们会发现，三个元素并排显示，.box1和span由于是左浮动，紧挨在一块儿，这种现象贴边。.box2盒子由于右浮动，因此紧靠着右边。浏览器
那么浮动若是你们想学好，必定要知道它的四大特性布局
1.浮动的元素脱标spa
2.浮动的元素互相贴靠.net
3.浮动的元素由"子围"效果代理
4.收缩的效果
脱标：就是脱离了标准文档流
看例子
<div class="box1">小红</div> <div class="box2">小黄</div> <span>小马哥</span> <span>小马哥</span>
.box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; }
效果：红色盒子压盖住了黄色的盒子，一个行内的span标签居然可以设置宽高了。
缘由1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。因此就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议你们这样叫。
缘由2：全部的标签一旦设置浮动，就可以并排，而且都不区分行内、块状元素，都可以设置宽高
看例子
html结构
<div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>
css样式
.box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; }
效果发现：
若是父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
若是没有足够的空间，那么就会靠着1哥，若是再没有足够的空间靠着1哥，本身往边靠
html结构：
<div> <img src="./images/企业1.png" alt=""> </div> <p> 123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 </p>
css样式：
*{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; }
效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提升，可是p中的文字不会被遮盖，此时就造成了字围效果。
收缩：一个浮动元素。若是没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
html结构：
<div> alex </div>
css样式：
div{ float: left; background-color: red; }
你们必定要谨记：关于浮动，咱们初期必定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一块儿浮动。另外，有浮动，必定要清除浮动，
在页面布局的时候，每一个结构中的父元素的高度，咱们通常不会设置。（为何？）
你们想，若是我初版的页面的写完了，感受很是爽，忽然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我以为图片要缩小一下。这样的需求在工做中很是常见的。真想打他啊。那么此时做为一个前端小白，确定是去每一个地方加内容，改图片，而后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是确定的。
看一个效果：
html效果：
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
</div> <div class="father2"></div>
css样式：
*{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮动 父盒子通常不设置高度*/ /*出现这种问题，咱们要清除浮动带来影响*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; float: left; height: 100px; background-color: blue; } .father2{ width: 1126px; height: 600px; background-color: purple; }
效果发现：若是不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
那么咱们知道，浮动元素确实能实现咱们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！因此咱们要清除浮动
还好还好。咱们有多种清除浮动的方法，在这里给你们介绍四种：
这个方法给你们上个代码介绍，它的使用不灵活，通常会经常使用页面中固定高度的，而且子元素并排显示的布局。好比：导航栏
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不容许有浮动元素
right：当前元素右边不容许有浮动元素
both：当前元素左右两边不容许有浮动元素
给浮动元素的后面加一个空的div，而且该元素不浮动，而后设置clear：both。
html结构：
<div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 而且该元素不浮动 ，而后设置clear:both 清除别人对个人浮动影响--> <!-- 内墙法 --> <!-- 平白无故加了div元素 结构冗余 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
css样式
*{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; }
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，而后设置
.clearfix:after{ /*必需要写这三句话*/ content: '.'; clear: both; display: block; }
新浪首页推荐伪元素清除法的写法
/*新浪首页清除浮动伪元素方法*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll，不管是否须要，用户代理都会提供一种滚动机制。所以，有可能即便元素框中能够放下全部内容也会出现滚动条。
有五个值：
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈如今元素框以外。 |
| hidden | 内容会被修剪，而且其他内容是不可见的。 |
| scroll | 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。 |
| auto | 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow：hidden清除法。
了解BFC前先一了解一下Box和Formatting Context
（1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX
（2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。
常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。
1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3.每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。 4.BFC的区域不会与float 元素重叠。 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6.计算BFC的高度时，浮动元素也参与计算
1.根元素 2.float属性不为none 3.position为absolute或fixed 4.display为inline-block 5.overflow不为visible
到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，你们必定要熟记于心。