浮动在网页中的应用
主要用于使得div脱离标准文档流，生成多列布局
float属性
left
元素向左浮动
right
元素向右浮动
none
默认值。元素不浮动，并会显示在其文本中出现的位置
浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）
浮动的特性
1.浮动元素支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，宽度足够的话，会排在一行
4.脱离文档流
5.提升层级半级
也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围
注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素
浮动—都不浮动
我是块级元素1，没有设置浮动
我是块级元素2，没有设置浮动
我是块级元素3，没有设置浮动
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
浮动—第一个div浮动
我是块级元素1，没有设置浮动
我是块级元素2，没有设置浮动
我是块级元素3，没有设置浮动
.class1 {
width: 200px;
height: 100px;
background: palegreen;
float: left
}
.class2 {
width: 250px;
height: 130px;
background: gold;
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
1）没有设置浮动的元素会填充浮动元素留下来的空间
2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层的最上面
3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围
浮动—第二个div浮动
我是块级元素1，没有设置浮动
我是块级元素2，没有设置浮动
我是块级元素3，没有设置浮动
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
浮动元素不会超越其前面的元素
浮动—3个div都浮动
我是块级元素1，没有设置浮动
我是块级元素2，没有设置浮动
我是块级元素3，没有设置浮动
.class1 {
width: 200px;
height: 100px;
background: palegreen;
}
.class2 {
width: 250px;
height: 130px;
background: gold;
float: left
}
.class3 {
width: 300px;
height: 180px;
background: red;
}
浏览器宽度足够时，并排排列
浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。
浮动—父子关系
#wrap2 {
width: 550px;
height: 900px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
1）浮动元素不会在其浮动方向上溢出父级的包含块
也就是说元素左浮动，其左外边距不会超过父级的左内边距，元素右浮动，其右外边距不会超过父级的右内边距
2）浮动元素的位置受到同级同向浮动元素的影响
也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面
浮动影响父层盒子高度
父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷
#wrap2 {
width: 550px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
溢出处理
overflow属性
visible
默认值。内容不会被修剪，会呈现在盒子之外
hidden
内容会被修剪，并且其余内容是不可见的
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow属性的妙用
使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度
#wrap2 {
width: 550px;
border: 3px solid red;
overflow:hidden;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
清除浮动
clear属性
left
在左侧不允许浮动元素
right
在右侧不允许浮动元素
both
在左、右两侧不允许浮动元素
none
默认值。允许浮动元素出现在两侧
清除两测浮动
清除两侧浮动，有扩展父级盒子高度的作用
我是一段文本我是一段文本我是一段文本我是一段文本
#wrap2 {
width: 550px;
border: 3px solid red;
}
.class1 {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.class2 {
width: 200px;
height: 300px;
background: yellow;
float: left;
}
.class3 {
width: 200px;
height: 300px;
background: fuchsia;
float: left;
}
.class4 {
width: 200px;
height: 200px;
background: chartreuse;
float: left;
}
.txt {
clear: both
}
清除两侧浮动前
清除两侧浮动后，有扩展父级盒子高度的作用
制作有路网水平导航菜单
Title
Flexbox版
.red-nav ul{
display: flex;
}
.red-nav li{
/* float: left; */
flex:0 0 auto;
line-height: 38px;
font-size: 16px;
font-weight: bold;
padding: 0 25px;
}
制作有路网搜索栏
Title
Flexbox版
.search-bar{
width: 1200px;
margin: 40px auto 0;
/* overflow: hidden; */
display: flex;
/*border: 3px solid black;*/
}
.search-bar .logo{
/* float: left; */
margin-right: 64px;
/*border: 1px solid blue;*/
}
.search-bar .cart{
margin-left: auto;
/* float: right; */
/* border: 1px solid blue; */
}
制作有路网推荐图书页面
Title
项目实战
制作有路网近期热销榜
Title
近期热销榜
-
1如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
1如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
1如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
4
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
-
4如果蜗牛有爱情（上下
1
萤火虫小巷
￥14.40
￥36.00
Flexbox版
.hot .book2 div{
margin-top: 6px;
/* float: left; */
}
.hot li:hover .book2{
display: flex;
}
课后作业
必做任务
1.制作带按钮的轮播图（浮动，定位）
2.制作网站导航（ 列表的浮动）
3.制作谁偷了我的能量（列表的浮动，定位）
扩展任务
1.制作网页布局（浮动）
2.制作商品列表（浮动，div）
补充说明：
弹性盒模型教程
浮动已经过时，最新使用FlexBox
同一份html
Title
浮动版float.css
.book-recommend{
width: 750px;
margin: 100px auto 0px;
}
.book-recommend .header
{
border-bottom: 1px solid gray;
background-image: url("img/laba.jpg");
background-repeat: no-repeat;
background-position: 0px 8px;
}
.book-recommend .header div{
float: right;
padding-top: 6px;
padding-right: 6px;
font-size: 16px;
}
.book-recommend .header div span{
color: red;
}
.book-recommend .header h2
{
font-size: 22px;
font-weight: bold;
padding-left: 20px;
padding-bottom: 8px;
}
.content
{
padding-top: 10px;
}
.content div{
text-align: left;
padding-left: 30px;
line-height: 32px;
}
.content li
{
width: 187px;
float: left;
text-align: center;
}
.content .price{
margin-top: -10px;
margin-bottom: 20px;
font-size: 14px;
}
.content .price .discount{
color: red;
font-weight: bold;
margin-right: 6px;
}
.content .price .origin-price{
color: gray;
text-decoration: line-through;
}
.content .author{
color:gray;
}
.content li a{
color: black;
}
.content li a:hover{
color: orange;
text-decoration: underline;
}
.content li img
{
max-width: 160px;
height: 160px;
}
Flexbox版float.css
.book-recommend{
width: 750px;
margin: 100px auto 0px;
}
.book-recommend .header
{
border-bottom: 1px solid gray;
background-image: url("img/laba.jpg");
background-repeat: no-repeat;
background-position: 0px 8px;
display: flex;
}
.book-recommend .header div{
/* float: right; */
padding-top: 6px;
padding-right: 6px;
font-size: 16px;
}
.book-recommend .header div span{
color: red;
}
.book-recommend .header h2
{
margin-right: auto;
font-size: 22px;
font-weight: bold;
padding-left: 20px;
padding-bottom: 8px;
}
.content
{
padding-top: 10px;
}
.content div{
text-align: left;
padding-left: 30px;
line-height: 32px;
}
.content ul{
display: flex;
flex-wrap: wrap;
}
.content li
{
width: 187px;
/* float: left; */
text-align: center;
}
.content .price{
margin-top: -10px;
margin-bottom: 20px;
font-size: 14px;
}
.content .price .discount{
color: red;
font-weight: bold;
margin-right: 6px;
}
.content .price .origin-price{
color: gray;
text-decoration: line-through;
}
.content .author{
color:gray;
}
.content li a{
color: black;
}
.content li a:hover{
color: orange;
text-decoration: underline;
}
.content li img
{
max-width: 160px;
height: 160px;
}