浮动float：

1.传统网页布局的三种方式：

普通流(标准流)：标签按照默认方式进行排列，像块状元素（独占一行），从上向下顺序排列，eg:div,p标签。行内元素，从左到右顺序排列，像span，a，i标签。
浮动
定位

2.为什么需要浮动？
我们用标准流能方便的实现如下效果么？
(1)如何让多个块级盒子水平排列成一行？

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制，效果如下。

<style>div {width: 100px;height: 100px;background-color: blue;display: inline-block;}</style>
</head>
<body><div>div</div><div>div</div><div>div</div>
</body>

总结：有很多的布局效果，标准流没法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用：就是可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动特性(重难点)：

加了浮动之后的元素，会有许多特性：

浮动元素会脱离标准流(脱标)，即浮动的盒子不再保留原先的位置，浮起来之后其他元素会占用它的位置，eg:案例一
浮动元素会一行内显示并且元素顶部对齐排列(注意：浮动的元素是互相贴靠在一起的（不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐)
浮动元素会具有行内块元素的特性。eg：案例二

还是简单的写一个小案例加深一下记忆吧：
案例一：

 <style>.box1 {/* float: left; */width: 100px;height: 100px;background-color: blue;}.box2 {width: 200px;height: 150px;background-color: pink;}</style>
</head>
<body><div class="box1">盒子1</div><div class="box2">盒子2</div>
</body>

效果图：

给第一个盒子设置浮动后，失去标准流：第二个盒子会把第一个盒子原来的位置所占用

案例二：
1.我们不难看出本来span是行内元素，此时因为浮动，不需要转换为块级元素，直接给出高度和宽度即可

 <style>/* 任何元素都可以浮动，不管原先是什么类型的元素，添加浮动后具有行内块元素相似的特性 *//* 如果行内元素有了浮动，则不需要转换为块级，行内块元素就可以给高度和宽度 */span,div {float: left;width: 200px;height: 100px;background-color: pink;}p {height: 200px;background-color: purple;}</style>
</head>
<body><span>1</span><span>2</span><div>div</div><p>p</p>
</body>

效果：

2.p元素由于设置为浮动，拥有了行内块元素的特点，没有设置宽度的条件下，宽度根据内容的多少来变化，内容多时，会自动把盒子撑开

 <style>/* 任何元素都可以浮动，不管原先是什么类型的元素，添加浮动后具有行内块元素相似的特性 *//* 如果行内元素有了浮动，则不需要转换为块级，行内块元素就可以给高度和宽度 */span,div {float: left;width: 200px;height: 100px;background-color: pink;}p {float: right;height: 200px;background-color: purple;}</style>
</head>
<body><span>1</span><span>2</span><div>div</div><p>pppppppp</p>
</body>

效果图：

浮动元素经常和标准流父级搭配使用：

为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，，之后内部的子元素采取浮动排列左右位置，符合网页布局的第一准则，原理如下图：（蓝色的为标准流父盒子）

还是简单写一个案例加深一下理解：

 <style>.box {width: 600px;height: 260px;background-color: pink;margin: 0 auto;}.left {/* float: left; */width: 200px;height: 260px;background-color: purple;}.right {/* float: left; */width: 400px;height: 260px;background-color: blue;}</style>
</head><body><div class="box"><div class="left">左侧</div><div class="right">右侧</div></div></body>

左侧和右侧盒子都未设浮动时，效果如图所示：

左侧盒子设置浮动，右侧盒子未设置浮动，效果如下图：

左侧和右侧都设置浮动，效果如下图：

总结：

当左右两侧的盒子都未设置浮动时，遵循标准流的排列，左侧子盒子和右侧子盒子都属于div块级元素，独占一行，并且标准流父盒子高度不够，所以右侧盒子会脱离父盒子在下一行单独显示
当左侧设置浮动，右侧未设置浮动时，左侧盒子由于浮动脱离原来的文档流，右侧盒子就会占用左侧盒子原来的位置，右侧盒子宽度一共400px，一半被左侧盒子遮挡，一半显露在外面，剩余的200px就是标准流父盒子的200px
当左侧设置浮动，右侧也设置浮动时，此时左右侧盒子都会脱离原来的文档流，此时左右侧盒子由于在同一级上，不存在遮挡的情况，此时就会铺满整个标准流父盒子

注：以上是用来布局盒子间无缝隙的情况

下面写一个盒子间有缝隙的小案例：

<style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 1226px;height: 285px;background-color: pink;margin: 0 auto;}.box li {width: 296px;height: 285px;background-color: purple;float: left;margin-right: 14px;}</style>
</head>
<body><ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>

效果图：

分析上述结果的原因：由于给每一个盒子都设置了右外边距，而最后一个盒子是不需要外边距的，所以最后一个盒子的外边距导致父盒子装不下，所以应该对最后一个盒子的外边距做单独处理

 <style>* {margin: 0;padding: 0;}li {list-style: none;}.box {width: 1226px;height: 285px;background-color: pink;margin: 0 auto;}/* 权重为11 */.box li {width: 296px;height: 285px;background-color: purple;float: left;margin-right: 14px;}/* 权重为10，无法覆盖掉上面的右外边距，需要用下面的写法*//* .last {margin-right: 0;} *//* 权重为11，会覆盖掉上面的右外边距 */.box .last {margin-right: 0;}</style>
</head>
<body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul>
</body>

效果如下：

注意：需要注意权重的问题，不然设置的属性无法生效

浮动布局两个注意的点：

浮动和标准流的父盒子搭配(先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右的位置)
一个元素浮动了，理论上其余的兄弟元素也要浮动。

注意：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流，如下面的例子：

还是简单写一下小案例加深一下记忆：

<style>.box {width: 900px;height: 300px;background-color: pink;margin: 0 auto;}.box1 {width: 200px;height: 200px;background-color: purple;}.box2 {float: left;width: 200px;height: 150px;background-color: red;}.box3 {width: 300px;height: 240px;background-color: blue;}</style>
</head>
<body><div class="box"><div class="box1">盒子一</div><div class="box2">盒子二</div><div class="box3">盒子三</div></div>
</body>

效果图：

注：上面的例子，我们给盒子二加了浮动后，并不是会像我们认为的盒子二的位置移动到了盒子一的右侧，而是在盒子一的下方。这就是所说的浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流，所以盒子一依然占据一行的空间

清除浮动：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

清除浮动的本质：

本质就是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的策略： 闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

语法：

清除浮动方法(重要)

1.额外标签法也称隔墙法，是W3C推荐的方法(不推荐)
2.父级添加overflow属性，将其属性值设置为hidden、auto、或scroll。
3.父级添加after伪元素（在存在浮动元素的父盒子添加:after伪类）

4.父级添加双伪元素

CSS浮动(涉及到清除浮动)及易忽略的点相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
css --- [读书笔记] 浮动(float) 与清除浮动
说明源代码学习 1. 浮动 1.1 CSS布局的三种机制网页布局的核心 - 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流.浮动和定位. 标准流: 块级元素(div ...
css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
【HTML/CSS】浮动模型和清除浮动的方法
1 浮动浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动. 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行. 浮动元素脱离了文档流,无法为文档流中的 ...
Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动上节回顾在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
html浮动代码_清除浮动与 BFC(块级格式化上下文)
BFC(Block Formatting Context)是在解决清除浮动的问题时遇到的. 一.什么是 BFC MDN: 块格式化上下文(Block Formatting Context,BFC) 是 ...
html中加入清除浮动,HTML中清除浮动的几种办法
为什么会有浮动在一张HTML里,元素的排序方式遵循文档流.即是依次排序.从上到下,从左到右依次排序. 而脱离文档流就意味着不再遵循此规则.可以通过float与positon使得元素脱离文档流,当给一 ...
CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"><head& ...

CSS浮动(涉及到清除浮动)及易忽略的点