总体内容
1、浮动
2、使用浮动优化上一篇博客列表制作表单
3、清除浮动
一、浮动
- 1.1、浮动特性
- <1>、浮动元素有左浮动(float:left)和右浮动(float:right)两种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两端对齐浮动</title> <style type="text/css"> .box1{ width: 200px; height: 100px; background-color: yellow; } .box1 .a1{ background-color: red; float: left; } .box1 .a2{ background-color: brown; float: right; } </style> </head> <body> <div class="box1"> <a class="a1">左浮动</a> <a class="a2">右浮动</a> </div> </body> </html>
- <2>、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- <3>、相邻浮动的块元素可以并在一行，超出父级宽度就换行
- <4>、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
- <5>、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
- <6>、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
- <7>、浮动元素之间没有垂直margin的合并
二、用列表制作表单
- 2.1、思路分析：上篇博客我们采用的是div套a标签的方式，这样的做法有点不正规，这里采用
ul套li,li套a标签的方式,这样是比较规范的一种方式 - 2.2、具体的效果以及代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用列表制作表单</title> <style type="text/css"> .menu{ width: 694px; height: 50px; /*background-color: aqua;*/ /* 去除小圆点 */ list-style: none; /* 自定义 margin */ margin: 50px auto; /* 去掉padding */ padding: 0px; } .menu li{ width: 98px; height: 48px; border: 1px solid gold; /* 去除子标签之间的间隙 */ float: left; /* 合并 1px的距离 */ margin-left: -1px; } .menu li a{ background-color: white; display: block; line-height: 48px; /* 控件居中显示 */ text-align: center; color: pink; /* 去除下划线 */ text-decoration: none; font-size: 16px; font-family: "Microsoft YaHei"; } .menu li a:hover{ background-color: gold; color: white; } </style> </head> <body> <ul class="menu"> <li><a href="">首页</a></li> <li><a href="">公司简介</a></li> <li><a href="">解决方案</a></li> <li><a href="">公司新闻</a></li> <li><a href="">行业动态</a></li> <li><a href="">招贤纳才</a></li> <li><a href="">联系我们</a></li> </ul> </body> </html>
三、清除浮动
- 3.1、我们先看一个问题：父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动，如下
提示出现这种情况是：子元素给了浮动，父视图没有给 height, 这种情况会出现父视图撑不开的现象，这样的情况下父视图需要清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> .list{ width: 210px; border: 1px solid #000000; margin: 50px auto; list-style: none; padding: 0px; } .list li{ width: 50px; height: 50px; background-color: gold; margin: 10px; float: left; } </style> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
- 正常的情况是：父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动
- 3.2、清除浮动的解决办法
- 解决办法一：父级上增加属性overflow：hidden
.list{ width: 210px; border: 1px solid #000000; margin: 50px auto; list-style: none; padding: 0px; /* 父级上增加属性overflow：hidden */ overflow: hidden; }
- 解决办法二：在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
<ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <!--第 2 种解决办法: 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）--> <div style="clear: both"></div> </ul>
- 解决办法三：使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table; } .clearfix:after{ clear:both; } /* 用来兼容IE */ .clearfix{ /* zoom：缩放网页 1：不放大，也不缩小 解决IE浮动的问题 */ zoom:1; }
