07.浮动

浮动在网页中的应用

主要用于使得div脱离标准文档流，生成多列布局

image.png

float属性

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

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素）

浮动的特性

1.浮动元素支持所有的css样式
2.内容撑开宽高
3.多个元素设置浮动，宽度足够的话，会排在一行
4.脱离文档流
5.提升层级半级
也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围

注意：不管是行级还是块级元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素

浮动—都不浮动

<div class="class1">我是块级元素1，没有设置浮动</div>

<div class="class2">我是块级元素2，没有设置浮动</div>

<div class="class3">我是块级元素3，没有设置浮动</div>

 .class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }

        
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
        }

        
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

image.png

浮动—第一个div浮动

<div class="class1">我是块级元素1，没有设置浮动</div>

<div class="class2">我是块级元素2，没有设置浮动</div>

<div class="class3">我是块级元素3，没有设置浮动</div>

     .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）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但文本依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围

image.png

浮动—第二个div浮动

<div class="class1">我是块级元素1，没有设置浮动</div>

<div class="class2">我是块级元素2，没有设置浮动</div>

<div class="class3">我是块级元素3，没有设置浮动</div>

     .class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }

        
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
            float: left
        }

        
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

浮动元素不会超越其前面的元素

image.png

浮动—3个div都浮动

<div class="class1">我是块级元素1，没有设置浮动</div>

<div class="class2">我是块级元素2，没有设置浮动</div>

<div class="class3">我是块级元素3，没有设置浮动</div>

   .class1 {
            width: 200px;
            height: 100px;
            background: palegreen;
        }

        
        .class2 {
            width: 250px;
            height: 130px;
            background: gold;
            float: left
        }

        
        .class3 {
            width: 300px;
            height: 180px;
            background: red;
        }

浏览器宽度足够时，并排排列

image.png

浏览器宽度不足以容纳最后一个div时，最后一个div掉下来，并且顶部不会超过倒数第二个div的底部。

image.png

浮动—父子关系

<div id="wrap2">
    <div class="class1"></div>
    
    <div class="class2"></div>
    
    <div class="class3"></div>
    
    <div class="class4"></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）浮动元素的位置受到同级同向浮动元素的影响
也就是说同一父级中有多个浮动元素，后一个元素的位置会受到前一个浮动元素位置的影响，他们不会相互遮挡，后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位，如果当前空间不足，则会换行，否则会放置在前一个浮动元素的下面

image.png

浮动影响父层盒子高度

父元素的高度靠子元素撑开，子元素全部浮动后，均脱离文档流，父元素高度塌陷

<div id="wrap2">
    <div class="class1"></div>
    
    <div class="class2"></div>
    
    <div class="class3"></div>
    
    <div class="class4"></div>
    
</div>

     #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;
        }

image.png

溢出处理

overflow属性

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

overflow属性的妙用

使用overflow扩展盒子高度，overflow属性会触发浏览器重新计算父元素盒子高度

<div id="wrap2">
    <div class="class1"></div>
    
    <div class="class2"></div>
    
    <div class="class3"></div>
    
    <div class="class4"></div>
    
</div>

     #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;
        }

image.png

清除浮动

clear属性

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

清除两测浮动

清除两侧浮动，有扩展父级盒子高度的作用

<div id="wrap2">
    <div class="class1"></div>
    
    <div class="class2"></div>
    
    <div class="class3"></div>
    
    <div class="class4"></div>
     <p class="txt">我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>

   #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
        }

清除两侧浮动前

image.png

清除两侧浮动后，有扩展父级盒子高度的作用

image.png

制作有路网水平导航菜单

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .red-nav{
            height: 38px;
            background-color: #D80000;

        }
        .red-nav li{
            float: left;
            line-height: 38px;
            font-size: 16px;
            font-weight: bold;
            padding: 0 25px;
       
        }
        .red-nav li a{

            color: white;

        }
        .red-nav li:hover{
            background-color: #C90000;
        }
        .red-nav .first{
            background-color: #C90000;
            padding-left: 20px;
            padding-right: 100px;
            /*margin-right: 100px;*/
        }
    </style>
</head>
<body>
<div class="red-nav">
    <ul>
        <li class="first">
            <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>
        <li>
            <a href="#">考试</a>
        </li>
    </ul>
</div>
</body>
</html>

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;
       
        }

制作有路网搜索栏

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .search-bar{
            width: 1200px;
            margin: 40px auto 0;
            overflow: hidden;
            /*border: 3px solid black;*/
        }

        .search-bar .logo{
            float: left;
            margin-right: 64px;
            /*border: 1px solid blue;*/
        }
        .search-bar .search-block{
            /*border: 1px solid blue;*/
            float: left;
        }
        .search-bar .cart{
            float: right;
            /*border: 1px solid blue;*/
        }

        .search-bar .hot-search li{
            display: inline-block;
            font-size: 16px;
            line-height: 32px;
            font-weight: bold;
            padding: 0px 2px;
        }

        .search-bar .hot-search li a{
            color: gray;
        }
        .search-bar .hot-search li a:hover
        {
            text-decoration: underline;
            color: orange;
        }

        .search-bar .cart
        {
            background-image: url("cart.jpg");
            background-repeat: no-repeat;
            /*border: 1px solid blue;*/
            padding-left: 44px;
            line-height: 20px;
        }

        .search-bar .cart a{
            color: black;
        }
        .search-bar .cart a:hover {
            text-decoration: underline;
        }

        .search-bar .cart span{
            color: red;
            font-weight: bold;
        }

        .search{
            width: 509px;
            margin: 0 auto;
            /*margin-top: 60px;*/
            height: 40px;
        }

        .search .input{
            width: 400px;
            height: 36px;
            border: 3px solid red;
            font-size: 20px;
        }
        .search .btn{
            vertical-align: top;
            height: 42px;
            width: 100px;
            margin-left: -3px;
            border: 0px solid black;
            background-color: red;
            color: white;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 6px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="search-bar">
    <div class="logo">
        <img src="logo.jpg">
    </div>
    <div class="search-block">
        <div class="search">
            <form action="#">
                <input type="text" class="input" placeholder="书名"><input type="submit" value="搜索" class="btn">
            </form>
        </div>
        <div class="hot-search">

            <ul>
                <li>热门搜索：</li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
                <li><a href="#">高等数学</a></li>
            </ul>
        </div>
    </div>
    <div class="cart">
            <div><a href="#">网站购物车<span>3</span>本</a></div>
            <div><a href="#">网站购物车<span>0</span>本</a></div>
    </div>
</div>
</body>
</html>

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; */
        }

制作有路网推荐图书页面

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .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;
            /*border: 1px solid red;*/
        }
        .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;

        }
    </style>
</head>
<body>
<div class="book-recommend">
    <div class="header">
        <div><span>1</span>/4</div>
        <h2>推荐图书</h2>
    </div>
    <div class="content">
        <ul>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/文化苦旅.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/平凡的世界.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/偷影子的人.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）5</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）6</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/蔡永康.jpg">
                <div><a href="#">狼图腾（修订版）7</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

项目实战

制作有路网近期热销榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .hot{
            width: 220px;
            /*border: 1px solid red;*/
            float: right;
        }
        .hot h2{
            font-size: 16px;
            line-height: 40px;
            padding-left: 34px;
        }
        .hot ul{
            border: 1px solid gray;
            font-size: 14px;
        }
        .hot li .book1{

            line-height: 44px;
            border-bottom: 1px dashed gray;
            padding-left: 14px;

        }
        .hot li span
        {
            margin-right: 6px;
            font-weight: bold;

        }

        .hot .red{
            color: red;
        }
        .hot .book2
        {
            display: none;
        }
        .hot .book2{
            height: 102px;
            border-bottom: 1px dashed gray;
        }
        .hot .book2 div{
            margin-top: 6px;
            float: left;
        }
        .hot .book2 img
        {
            width: 76px;

        }

        .hot .book2 .nored{
            margin-left: 10px;
            display: inline-block;
            margin-top: 6px;
        }
        .hot .book2 .red
        {
            margin-left: 10px;
            display: inline-block;
            margin-top: 6px;
        }
        .hot .book2 .title{
            font-size: 14px;
            margin-bottom: 22px;
        }

        .hot .book2 .discount-price{
            font-size: 16px;
            font-weight: bold;
            color: red;
        }

        .hot .book2 .old-price{
            font-size: 14px;
            color: gray;
            text-decoration: line-through;
        }

        .hot li:hover .book1{
            display: none;
        }
        .hot li:hover .book2{
            display: block;
        }
    </style>
</head>
<body>
<div class="hot">
    <h2>近期热销榜</h2>
    <ul>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span class="red">1</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="red">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">4</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
        <li>
            <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
            <div class="book2">
                <div><span class="nored">1</span></div>
                <div><img src="img/萤火虫小巷.jpg"></div>
                <div>
                    <p class="title">萤火虫小巷</p>
                    <p class="discount-price">￥14.40</p>
                    <p class="old-price">￥36.00</p>
                </div>
            </div>
        </li>
    </ul>
</div>

</body>
</html>

Flexbox版

       .hot .book2 div{
            margin-top: 6px;
            /* float: left; */
        }
        .hot li:hover .book2{
            display: flex;
        }

课后作业

必做任务
1.制作带按钮的轮播图（浮动，定位）
2.制作网站导航（列表的浮动）
3.制作谁偷了我的能量（列表的浮动，定位）

扩展任务
1.制作网页布局（浮动）
2.制作商品列表（浮动，div）

补充说明：

弹性盒模型教程

image.png

浮动已经过时，最新使用FlexBox
同一份html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <link href="float.css" rel="stylesheet">
</head>
<body>
<div class="book-recommend">
    <div class="header">
        <h2>推荐图书</h2>
        <div><span>1</span>/4</div>
    </div>
    <div class="content">
        <ul>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/文化苦旅.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/平凡的世界.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/偷影子的人.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）5</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）6</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/蔡永康.jpg">
                <div><a href="#">狼图腾（修订版）7</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
            <li>
                <img src="img/狼图腾.jpg">
                <div><a href="#">狼图腾（修订版）</a></div>
                <div class="author">姜戎</div>
                <div class="price">
                    <span class="discount">¥15.90</span>
                    <span class="origin-price">¥39.80</span>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

浮动版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;

}

最后编辑于：2020.07.11 17:32:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,240评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,328评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,182评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,121评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,135评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,093评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,013评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,854评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,295评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,513评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,398评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,989评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,636评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,657评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352

07.浮动

浮动在网页中的应用

浮动的特性

浮动—都不浮动

浮动—第一个div浮动

浮动—第二个div浮动

浮动—3个div都浮动

浮动—父子关系

浮动影响父层盒子高度

溢出处理

overflow属性的妙用

清除浮动

清除两测浮动

制作有路网水平导航菜单

制作有路网搜索栏

制作有路网推荐图书页面

项目实战

课后作业

补充说明：

推荐阅读更多精彩内容