您的位置：首页 > 其它

浮动

2019-10-05 10:01 103 查看

浮动
指设置了浮动属性的元素会脱离文档流的控制，移动到其父元素中指定位置的过程。

语法：
选择器 {float: 属性值;}
说明：
left:元素向左浮动
right:元素向右浮动
none：元素不浮动（默认值）

浮动特性
浮动脱离文档流，不占位置，会影响文档流，浮动只有左右浮动。
浮动首先创建包含块的概念，浮动元素总是找它最近的父级元素对齐，但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系，如果上一个元素有浮动，则A元素项部会和上一个元素的项部对齐；如果上一个元素是标准流，则A元素的项部会和上一个元素的底部对齐。

如果块级元素添加浮动之后，会有行内块元素的特性。
浮动的目的：就是为了让多个块级元素同一行上显示。
实际应用过程中,通常要增加一个块元素作为父元素,才能将高度架起来,不会造成高度塌陷.

代码如下：

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 20px;
height: 20px;
background-color: green;
float: left;
}
div:nth-child(2) {
width: 40px;
height: 40px;
background-color: orange;
}
div:nth-child(3) {
height: 60px;
background-color: red;
float: left;
/*本来没有设置宽度,块元素满一行的,但由于浮动具有了行内块元素,由内容决定宽度.*/
}
span {
height: 100px;
width: 50px;
float: left;
background-color: blue;
/*行内元素设置高度不生效,但浮动起来,就有了行内块元素特性*/
}

</style>
</head>
<body>
<div></div>
<div></div>
<div>123</div>
<span>456</span>
</body>
</html>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航