CSS浮动

Posted on Edited on Views: Valine:
Symbols count in article: 2k Reading time ≈ 2 mins.

Div设置（上）**

DIV是层叠样式表中的定位技术，全称division

有时把div称为图层，更多的时候称为块

编程练习1

编写div块级元素，设置背景颜色为红色，使用绝对定位设置，并设置div距离左侧50%的距离。

任务提示

1、设置div高度和宽度相同。

2、使用left属性设置百分比使div距离左侧50%的距离。

3、使用绝对定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .div1{
        position:absolute;
        left:50%;
        width:30px;
        height:30px;
        background-color:red;
    }
    
  </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

编程练习2

编写div块级元素，设置div中包含图片的大小，无法显示出的设置滚动条进行显示。

任务提示

1、设置定div高度和宽度相同

2、使用div包含图片

3、使用overflow设置滚动条

http://climg.mukewang.com/5cbd23450001d64d16000900.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1{
            height:150px;
            width:150px;
            position:absolute;
            top:50px;
            left:50px;
            overflow:scroll;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="http://climg.mukewang.com/5cbd23450001d64d16000900.jpg" />
</div>
</body>
</html>

div设置（下）

css边框 设置分为上下左右四个

盒子模型

盒子模型。margin外边距，元素和元素之间的距离；padding内边距，边框和内容之间的距离。

box-sizing padding的距离由哪里产生
属性1：content-box 在宽度和高度之外绘制padding和border
属性2：border-box 在设定的宽度和高度内减去（压缩内容）

编程练习3

在不更改蓝色区域大小的情况下，将黄色区域设置为水平垂直居中。

任务提示

  1. 水平居中可以设置top左外边距为200px。
  2. 垂直居中可以设置content内上边距为100px，并使用box-sizing属性设置边距产生的位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content{
            width:800px;
            height:400px;
            background-color: skyblue;
            padding-top:100px;/*这是补充的代码*/
            box-sizing:border-box;/*这是补充的代码*/
        }
        .top{
            width:400px;
            height:200px;
            background-color: yellow;
            margin-left:200px;/*这是补充的代码*/
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="top"></div>
    </div>
</body>
</html>

编程练习4

小伙伴们，学习了margin外边距属性，根据效果图的提示，补充代码 。

效果图如下：

任务

第一步：设置列表项之间的距离

第二步：设置列表项与父元素之间的距离

任务提示

父元素本身上面设置了一个上内边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            * {
                margin-left: 0;
                padding: 0;
             }
            ul{
                list-style:none;width:300px;height:400px;
                background-color:pink;
                padding-top:80px;
            }
            li{
                width:200px;height:50px;background-color:yellow;
                /*样式补充*/
                margin-left:40px;
                margin-bottom:40px;
               
                
                
            }
        </style>
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </body>
</html>

行级元素与块级元素

行级元素：行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的
a标签、label、img、span等

块级元素：块级元素在默认情况下，会独占一行
div、h标签、li、table等

定位机制

定位机制，主要针对块级元素

浮动

float包裹和崩溃

崩溃/崩塌/破坏：将子元素设置为浮动之后，父元素在没有指定高度的情况下，父元素的高度将不存在

包裹特性

img行级元素
vertical-align:bottom;垂直对齐方式，底边对齐（将行级元素转化为块级元素）。
包裹性：div恰好包裹图片。

编程练习5

我们学习了浮动的属性，那么我们就可以实现块元素在同一行现实的功能，那么我们就来实现一个两行三列的效果吧，如下图所示：

图片地址如下：

http://climg.mukewang.com/590fe9770001e63102400135.jpg

http://climg.mukewang.com/590fe97d00011bda02400135.jpg

http://climg.mukewang.com/590fe982000150ba02400135.jpg

任务

先写出html结构：

1、首先需要一个大的容器来容纳这六个小的模块。

2、写出这六个小模块；

3、每个小模块包含了两部分，上面的图片和下面的文字。

再定义css样式：

1、先给每个小模块样式进行一下设置，包括边框和内外边距。

2、给每个小模块设置浮动，实现两行3列的排布。

tips：注意大容器宽度的设置

3、如果父元素是塌陷的，还需要解决一下父元素塌陷的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
        <!-- 此处编写样式 -->
        <style type="text/css">
       	  p{
       	  	margin:0 0 5px 5px; 
       	  }
       	  #div{
       	  	width: 800px;
       	  }
          #div1{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
          #div2{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
          #div3{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
          #div4{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
          #div5{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
          #div6{
          	float:left;
          	border: 1px solid;
          	margin-right: 10px;
          	margin-bottom: 10px;
          }
        </style>
</head>
<body>   
        <!-- 此处写代码 -->
        <div id="div">
            <div id="div1">
                <img id="img1" src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
            <div id="div2">
                <img id="img2" src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
            <div id="div3">
                <img id="img3" src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
            <div id="div4">
                <img id="img4" src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
            <div id="div5">
                <img id="img5" src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
            <div id="div6">
                <img id="img6" src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
                <p>欢迎来到慕课网学习新知识！</p>
            </div>
        </div>
</body>
</html>

编程练习6

我们学习了浮动的知识，那么我们来实现图文混排的效果如下图所示：

图片素材：

http://climg.mukewang.com/59c8742e0001bc9607120172.jpg

http://climg.mukewang.com/59c874560001779307120172.jpg

任务

1、首先给大的容器content设置基本样式，宽度为810px，高度自适应，居中显示，字体为微软雅黑，行高为24px，边距、边框等设置。

2、想要实现文字环绕图片，实现图文混排的形式，我们给图片实现浮动，很明显我们可以给第一个图片添加左浮动，第二个图片实现右浮动。

3、到这一步我们虽然实现了图文混排的效果，但是字体离图片还是太近了，所以需要添加一些边距来美化一下页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>慕课网</title>
    <style type="text/css">
    	.content{
    		width: 810px;
    		font-family: 微软雅黑;
    		text-align: center;
    		line-height: 24px;
    		border: 1px solid black;
    		padding: 5px;
    	}
		.img01{
			float: left;
		}
		.img02{
			float: right;
		}
    </style>
</head>    
<body>
    <div class="content">
        <img src="http://climg.mukewang.com/59c8742e0001bc9607120172.jpg" alt="" class="img01">
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>
        慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>
        4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/>
        <img src="http://climg.mukewang.com/59c874560001779307120172.jpg" alt="" class="img02">
        老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/>
        慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。
    </div>
</body>
</html>

清除浮动

为什么清除浮动
1.为了使父元素具有高度（”防止高度崩塌“）
2.从某个元素开始不再需要浮动了。

clear:both;

编程练习7

如下图所示，父元素中有两个红色的方框子元素，由于浮动的原因使得父元素出现了高度塌陷的问题，父元素变成了一条直线。清除浮动的方式有很多，请运用清除浮动的方式使父元素能够包住子元素。

任务

1、在父元素内，所有子元素的最后添加空的子元素，用来清除浮动。

2、给添加的空白的子元素添加clear：both；属性。

任务提示

提示：在父元素中的所有子元素的最后添加带有clear：both；属性的元素可以清楚浮动，使得父元素具有高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .per{
            width: 300px;
            height: auto;
            border:2px solid #aaa;
        }
        .li{
            width: 100px;
            height: 100px;
            background: red;
            margin: 5px;
            float: left;
        }
        /*此处写代码*/
        #Divclear::after{
            content:"";
            visibility:hidden;
            display:block;
            height:0px;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="li"></div>
        <div class="li"></div>
        <!-- 此处写代码 -->
        <div id="Divclear"></div>
    </div>
</body>
</html>
-------------本文结束感谢您的阅读-------------