0
点赞
收藏
分享

微信扫一扫

13、前端开发:CSS知识总结——浮动及高度塌陷


1、浮动定义

float(浮动),会使元素向左或者向右移动,其周围的元素也会重新排列。

2、浮动用法

可选值: none    默认值,元素不浮动

                  left    元素向左浮动

                right    元素向右浮动

float可以使块元素水平布局

3、浮动特点

1.浮动元素脱离文档流之后不会在占用文档流的位置,它下面的元素会立即向上移动

举例:

 

<head> 
<style>
.box{background-color: red;
height: 200px;
width: 200px;}
.box1{background-color: yellow;
height: 400px;
width: 400px;}

</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_servlet


正常情况下,黄色方块 是 在红色方块下面的下面

当我们为红色方块设置左浮动时, 黄色方块会向上移动

<head>
<style>
.box{background-color: red;
height: 200px;
width: 200px;
float: left;}
.box1{background-color: yellow;
height: 400px;
width: 400px;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_css_02

2.浮动的元素会移动到父元素的左侧或者右侧

<head>
<style>
.fu{width: 800px;
height: 800px;
border:1px solid blue;
margin: 0 auto;}
.box{background-color: red;
height: 200px;
width: 200px;
float: left;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float: right;}
</style>
</head>
<body>
<div class="fu" >
<div class="box"></div>
<div class="box1"></div>
</div>

13、前端开发:CSS知识总结——浮动及高度塌陷_文档流_03


3.浮动元素不会溢出父元素

4.浮动元素上面是一个没有浮动的块元素,则浮动元素无法上移

举例

红色方块不设置浮动

给黄色方块设置左浮动

<head>
<style>
.box{
background-color: red;
height: 200px;
width: 200px;}
.box1{
background-color: yellow;
height: 400px;
width: 400px;
float: left;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_文档流_04

红色方块不设置浮动

给黄色方块设置右浮动

<head> 
<style>
.box{background-color: red;
height: 200px;
width: 200px;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float: right;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_文档流_05

 

脱离文档流的特点(元素设置浮动从文档流中脱离以后,元素的一些特点也会发生改变)

块元素:

                     1.不会独占一行

                     2.块元素的宽高被内容撑开

行内元素:

           行内元素脱离文档流会变成块元素,特点与块元素相同

总结:脱离文档流之后不区分块元素和行内元素

 4、高度塌陷

在正常的文档流当中,父元素高度是被子元素撑开的

若子元素浮动,脱离文档流,会导致我们父元素高度丢失,我们叫高度塌陷

解决高度塌陷的方法:

1.清除浮动:clear

属性值: 

                      none默认值    不清除浮动

                      left   清除左侧元素对当前元素的影响

我们可以在box父元素中,在box1(浮动盒子)后面加一个空盒子(box2)来清除浮动,解决高度塌陷

<head>
<style>
.box{border:1px solid red;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float:left;
.box2{clear:both}
</style>
</head>
<body>
<div class="box"><div class="box1"></div>
<div class="box2"></div>
</div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_servlet_06

这个方法不太推荐,毕竟加了一个无意义的标签,写一个还行,太多就有点泛滥了

2.给父元素设置固定高度(不建议使用,不够灵活)

3.将父元素添加属性overflow:hidden

缺点:有时候可能会和我们想得到的预期效果不一样

4.给父元素设置一个伪元素选择器,并设置常用的清除浮动的样式,然后after就会把盒子撑开

<head>
<style>
.box{border:1px solid red;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float:left;}
.box::after{
/* 添加一个内容 */
content:" ";
/* 将内容转换为块元素 */
display:block;
/* 清除两侧的浮动 */
clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>

13、前端开发:CSS知识总结——浮动及高度塌陷_块元素_07

 

举报

相关推荐

0 条评论