CSS – 浮动
文章目录
1. 使设置了float的元素脱离标准流(normal flow)的控制,不占位置,float后影响原本标准流的元素的位置。个人理解,标准流为flow 1,float后的流为flow 2,就像PS里面的图层1,图层2
2. 使多个div一行内显示
3. 最早用来控制图片,实现文字环绕图片的效果(如百度百科里面的)
4. 例子1. 加减注释玩一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/* float: left;*/
}
.one {
background-color: pink;
/* float: left;*/
}
.two {
width: 110px;
background-color: purple;
float: left;
}
.three {
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
5. float可以让元素默认转换为行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
float: left;
/*可以让元素默认转换为行内块元素 特性*/
}
span {
width: 150px;
height: 100px;
/* display: block;*/
background-color: purple;
float: left;
/*妙用 如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
}
</style>
</head>
<body>
<div>div</div>
<span>I am span</span>
</body>
</html>
6. 浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的, 是否占有位置
7. 清除浮动方法1,clear:both
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
- 准确地说,并不是清除浮动,而是清除浮动后造成的影响
- clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响),且父级元素的高度为已经float的子元素高度的最大值,不会为0.
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.217.253.197,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-floating.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
float: left;
/*可以让元素默认转换为行内块元素 特性*/
}
span {
width: 150px;
height: 100px;
/* display: block;*/
background-color: purple;
float: left;
/*妙用 如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
}
</style>
</head>
<body>
<div>div</div>
<span>I am span</span>
</body>
</html>
7. 清除浮动方法1,clear:both
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
- 准确地说,并不是清除浮动,而是清除浮动后造成的影响
- clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响),且父级元素的高度为已经float的子元素高度的最大值,不会为0.
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.217.253.197,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-floating.html
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
- 准确地说,并不是清除浮动,而是清除浮动后造成的影响
- clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响),且父级元素的高度为已经float的子元素高度的最大值,不会为0.
文章链接:https://www.ooize.com/css-floating.html
订阅
登录
0 评论