html设置浮动

htmledit_views">

标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成

块级元素（block）

<h1>…<h6>、<p>、<div>、列表

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义width和height，除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。块级元素有以下特点：
- 每个块级元素都是独自占一行。
- 元素的高度、宽度、行高和边距都是可以设置的。　　
- 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。

内联(行内)元素（inline）

<span>、<a>、<img/>、<strong>...

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。行内元素有以下特点：
- 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
- 行内元素的高度、宽度、顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

行内块级元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。具体特点如下：
- 和其他行内或行内块级元素元素放置在同一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。

display

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

display特性

块级元素与行级元素的转变(block、inline) 控制块元素排到一行(inline-block) 控制元素的显示和隐藏(none)

示例演示1

练习1-QQ会员页面导航

需求说明导航背景颜色为黑色半透明效果鼠标移入“功能特权”等导航信息时文字颜色变为蓝色，无下划线 “登录”部分信息使用超链接实现，添加圆角边框，鼠标移入字体颜色加深，添加背景颜色为黄色

块元素排在一行的方法

可以使用什么属性使块元素排在一行？ inline-block float

float

浮动

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

示例2,示例3,示例4

块级元素设置左浮动

脱离原标准文档流，后面标签文档流全部往前走
不会独点一行，宽度、高度由内容决定

练习2-热门活动

需求说明热门活动页宽度为700px，在浏览器中居中显示文字“更多”使用右浮动让它排列到右边使用无序列表布局图片和文字说明使用浮动让列表项排列在一行

练习3-电视剧详情列表

需求说明标题前面图标使用背景图片，标题字体为12px，高度为27px，距离左边38px 中间部分使用浮动让图片和右边的文字描述排在一行下面的列表项中的文字使用左浮动，作者描述使用右浮动所有的超链接都没有下划线，鼠标移入有下划线

清除浮动

layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？

浮动元素脱离标准文档流
清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

示例5,清除浮动

解决父级边框塌陷

方法一

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
- 浮动元素后面加空div

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div><div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

存在问题：引入空的div

方法二

设置父元素的高度

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

存在的问题：如果内容增加，无法包含

方法三

父级添加overflow属性

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

overflow属性

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

方法四

父级添加伪类after

<div id="father" class="clear"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
.clear:after{content: '';          /*在clear类后面添加内容为空*/display: block;      /*把添加的内容转化为块元素*/clear: both;         /*清除这个元素两边的浮动*/
}

小结

清除浮动，防止父级边框塌陷的四种方法
- 浮动元素后面加空div
  - 简单，空div会造成HTML代码冗余
- 设置父元素的高度
  - 简单，元素固定高会降低扩展性
- 父级添加overflow属性
  - 简单，下拉列表框的场景不能用
- 父级添加伪类after
  - 写法比上面稍微复杂一点，但是没有副作用，推荐使用

练习4-京东登录页面

训练要点使用header、article、nav、footer等结构元素布局使用float布局页面使用background设置背景图像使用padding和margin设置网页元素的内边距和外边距使用clear属性清除浮动
需求说明页面宽度为990px，水平居中显示头部logo图和文字“欢迎登录”，使用浮动和盒子模型进行排版使用表单元素布局京东会员登录小窗口
实现思路中间主体部分的结构

<article class="content"><div class="wrap"><div class="login-box"><div class="login-form"><h2>京东会员<a href="">立即注册</a></h2><form action="" method="post" id="loginForm">……

中间部分背景全屏显示，内容部分宽度990px且居中显示，content层用来设置红色背景颜色，wrap层用来设置宽度990px居中显示，login-box层用来设置大图背景，login-form用来设置表单登录的位置、宽度等

inline-block和float的区别

display:inline-block 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便位置方向不可控制，会解析空格
float 可以让元素排在一行并且支持宽度和高度，可以决定排列方向 float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式