目录

浮动（Float）

1、什么是文档流？

2、什么是浮动？

3、浮动的特点

浮动会脱离标准流

2.浮动会影响元素的显示方式

3、设置浮动后，元素将没有默认宽度，需要手动设置width：100%；

4、彼此相邻的浮动元素

5、逃不出父盒子的手掌心

4、清除浮动

1、上下排列：

2、嵌套排列：

5、综合案例

案例一，小米闪购时间模块

案例二，淘宝业务模块

案例三，导航条结构

浮动（Float）

1、什么是文档流？

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的特点：

块元素：在文档流中会独占一行，块元素会自上向下排列

行内元素：在文档流中只占自身的大小，会默认从左向右排列

2、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，

直到它的外边缘碰到包含框或另一个浮动框的边框为止(会挨着父元素左边或右边排列，如果之前有浮动的元素 会挨着浮动的元素排列)

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

浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。

在CSS中，通过float属性来定义浮动，其基本语法如下：

选择器 {    float: 属性值; }

讯享网

Float（浮动），最早用来控制图片，以便其他元素（特别是文字）实现环绕图片的效果，但它在布局时一样非常有用。

讯享网

讯享网<p> <img src="./img/a0.PNG" width="120px" height="80px"> 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是 一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 </p> img { float: left; }

3、浮动的特点

1. 浮动会脱离标准流

如果一个元素按照正常的标准流来显示，会在html中所属的位置上占位，后面的元素会紧跟着它，但是浮动脱离了标准流，以后我们在看到浮动的元素之后，不能以正常的标准流里进行判断

浮动后会影响其他元素的显示方式，因为其他元素会当他不存在。

浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。

2.浮动会影响元素的显示方式

浮动后的行内元素是可以设置宽高 ，块级元素是内容的宽高，说白了会改变他的模式display为inline-block

 float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性

3、设置浮动后，元素将没有默认宽度，需要手动设置width：100%；

4、彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

 <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> img { margin: 10px; float: left; }

尝试调整浏览器大小，看一看图片没有足够大小显示时会做什么？  会跟着动

5、逃不出父盒子的手掌心

不管这么浮动，都在父盒子里面。 记住：浮动使用的原则，一般是 一起浮动 

如果父元素没有设置高度，浮动的子元素不会撑开父元素

讯享网 <style> img { margin: 10px; float: left; } div { width: 100px; height: 100px; border: 1px solid red; } </style> <div> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> </div> 

4、清除浮动

我们为什么要清除浮动呢？

本来4个黄色盒子是在绿色盒子内，因为对4个黄色盒子使用了float浮动，所以4个黄色盒子产生了浮动，导致绿色盒子不能撑开，这样浮动就产生了。

 <div class="wrap"> <div></div> <div></div> <div></div> <div></div> </div> .wrap{ border:1px solid green; width: 880px; margin:0 auto; } .wrap div{ background: yellow; width: 200px; height: 100px; float: left; margin:10px; }

1、上下排列：

清除浮动clear属性  (我被影响了，所以在我自己的标签内添加clear）

这个属性主要有三个值:

• left 清除前面的左浮动元素带给我的影响
• right清除前面的右浮动元素带给我的影响
• both 同时清除前面的左右浮动元素带给我的影响. 一般情况下选择这个值比较方便.

讯享网.clear{   clear:both }

clear:both; clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别人对我的影响

原理：父元素和冗余元素的高度都为0，并且浮动元素会盖在其上方，当设置clear：both时，冗余元素会躲开浮动元素直到不被其盖住，而父元素为了包裹住他自然就撑开了

2、嵌套排列：

当父元素没有高度时，子盒子设置浮动 会影响父元素后边的元素,称为高度塌陷。

高度塌陷的解决方法：

a 只需要给父元素加上高度：会导致布局不是很灵活

b 设置父元素overflow：hidden（BFC）：当子盒子高度需要超出父元素高度时，会受到影响

c 设置dispaly： inlin-block（BFC）：会影响到后面的布局

d 给浮动子盒子后加一个兄弟空标签 给空标签加clear：会多加一个标签

 <div class="empty"></div> .empty { clear: both; } 

e 给父元素设置after伪类清除：设置父元素中的最后一个子元素     推荐（是空标签的加强版）

讯享网.fa::after{   display: block;   content: "";   clear: both; } <div class="fa"> <div class="sn"></div> </div> 给sn设置了浮动，fa被影响了，所以给fa写clear 

f 给父元素也设置浮动让它与子盒子在统一文档流下就能被撑开了：会影响后面的盒子

5、综合案例

1. 案例一，小米闪购时间模块

案例二，淘宝业务模块

* { margin: 0; padding: 0; } a { text-decoration: none; } ul,li { list-style-type: none; } ul { width: 289px; margin: 40px auto; } li { width: 71px; height: 75px; float: left; text-align: center; border-left: 1px solid #ccc; border-top: 1px solid #ccc; } a span { background-image: url(./img/sprit.png); width: 26px; height: 26px; display: block; background-size: 100%; margin: 10px auto; } li p { color: black; } .youxi { border-right: 1px solid #ccc; } .caipiao,.dianying,.jiudian,.licai { border-bottom: 1px solid #ccc; } .licai { border-right: 1px solid #ccc; } .chexian span { background-position: 0 -46px; } .lvxing span { background-position: 0 -94px; } .youxi span { background-position: 0 -142px; } <ul> <li class="huafei"> <a href=""> <span></span> <p>充话费</p> </a> </li> <li class="chexian"> <a href=""> <span></span> <p>车险</p> </a> </li> <li class="lvxing"> <a href=""> <span></span> <p>旅行</p> </a> </li> <li class="youxi"> <a href=""> <span></span> <p>游戏</p> </a> </li> <li class="caipiao"> <a href=""> <span></span> <p>彩票</p> </a> </li> <li class="dianying"> <a href=""> <span></span> <p>电影</p> </a> </li> <li class="jiudian"> <a href=""> <span></span> <p>酒店</p> </a> </li> <li class="licai"> <a href=""> <span></span> <p>理财</p> </a> </li> </ul> 

案例三，导航条结构

讯享网 <header> <nav> <p>主页</p> <p>新闻</p> <p>联系我们</p> <p>关于我们</p> </nav> </header> <div class="container"> <aside> <ul> <li>HTML5</li> <li>CSS</li> <li>javaScript</li> <li>Node.js</li> <li>vue.js</li> <li>react.js</li> <li>小程序</li> </ul> </aside> <article> <h1 class="title">这是标题</h1> <section> <h2>HTML5</h2> <P>1.体温异常者，严禁进入教室。学生在教室如出现咳嗽、发烧、乏力应主动减少与他人接触，立即上报辅导员并离开教室。 2.学生做好个人防护，在教室内应自觉各位就坐，应打开自习室窗户，保持良好通风，暂停使用空调。 1.体温异常者，严禁进入教室。学生在教室如出现咳嗽、发烧、乏力应主动减少与他人接触，立即上报辅导员并离开教室。 2.学生做好个人防护，在教室内应自觉各位就坐，应打开自习室窗户，保持良好通风，暂停使用空调 </P> <p>1.体温异常者，严禁进入教室。学生在教室如出现咳嗽、发烧、乏力应主动减少与他人接触，立即上报辅导员并离开教室。 2.学生做好个人防护，在教室内应自觉各位就坐，应打开自习室窗户，保持良好通风，暂停使用空调</p> </section> </article> </div> <footer> <p>底部文字</p> </footer> * { margin: 0; padding:0 ; } header nav { background-color: rgb(119,119,119); height: 50px; width: 1220px; } nav p { height: 100%; line-height: 50px; float: left; margin-left:10px; color: white; font-weight: 400px; padding-left: 10px; padding-right: 10px; } nav>p { margin-left: 0; } nav p:hover { background-color: green; } aside ul { margin: 10px 10px; } aside li { width: 180px; height: 35px; line-height: 35px; background-color: rgb(238,238,238); margin-bottom: 5px; font-family: Verdana; font-weight: lighter; color: #ccccccdd; } .container { float: left; } aside { float: left; } aside li:hover { background-color: rgb(32, 96, 104); color: white; } article { float: right; margin: 10px 10px; } article h1 { font-size: large; text-align: center; color: white; width: 1000px; height: 110px; line-height: 110px; background-color: rgb(33,150,243); } article section { width: 1000px; margin-top: 10px; } article p { margin-top: 10px; margin-bottom: 10px; } footer { clear: both; width: 1220px; height: 60px; margin-top: 500px; background-color: hsl(0, 4%, 18%); } footer p { text-align: center; height: 60px; line-height: 60px; color: white; }