元素的浮动 float

最新推荐文章于 2023-10-18 21:02:51 发布

神农尺

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量211

点赞数

分类专栏： HTML+CSS 文章标签： HTML 浮动 float 清除浮动 overflow:hidden

本文链接：https://blog.csdn.net/qq_42855675/article/details/82913321

版权

HTML+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

浮动属性（float）

1.left：对象居左浮动，文本流向对象的右侧
2.right：对象居右浮动，文本流向对象的左侧
3.none：对象不浮动，默认值

清除浮动

clear：

1.left：清除左侧浮动的影响
2.right：清除右侧浮动的影响
3.none：不清楚浮动，默认值
4.both：同时清除左右两侧浮动的影响
注：清除浮动后使元素独自占据一行，该方法不适用于清除子类元素浮动对父类元素的影响

案例如下：
未清除浮动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>清除浮动的应用</title>
<style type="text/css"> 
div{float:left;}
</style>
</head>
<body>
<div><img src="images/pic11.jpg"/></div>
<div><img src="images/pic22.jpg"/></div>
<div><img src="images/pic33.jpg"/></div>
<p>水墨画：由水和墨经过调配水和墨的浓度所画出的画，是绘画的一种形式，更多时候，水墨画被视为中国传统绘画，也就是国画的代表。也称国画，中国画。基本的水墨画，仅有水与墨，黑与白色，但进阶的水墨画，也有工笔花鸟画，色彩缤纷。后者有时也称为彩墨画。</p>
</body>
</html>

在这里插入图片描述

清除浮动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>清除浮动的应用</title>
<style type="text/css"> 
div{float:left;}

p{clear:both;}  //或者p{clear:left;}

</style>
</head>
<body>
<div><img src="images/pic11.jpg"/></div>
<div><img src="images/pic22.jpg"/></div>
<div><img src="images/pic33.jpg"/></div>
<p>水墨画：由水和墨经过调配水和墨的浓度所画出的画，是绘画的一种形式，更多时候，水墨画被视为中国传统绘画，也就是国画的代表。也称国画，中国画。基本的水墨画，仅有水与墨，黑与白色，但进阶的水墨画，也有工笔花鸟画，色彩缤纷。后者有时也称为彩墨画。</p>
</body>
</html>

在这里插入图片描述

overflow：

利用overflow:hidden; 或者overflow:auto; 清除浮动，此方法用于弥补clear的不足

案例如下
未清除浮动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>子元素浮动对父元素的影响</title>
<style type="text/css"> 
.one,.two,.three{
	float:left;
	width:100px;
	height:100px;
	margin:10px;
	background: red;
}
.box{
	border:1px solid #ccc;
	background: blue;
}
</style>
</head>
<body>
<div>
<div class="box">
	<div class="one">div1</div>
	<div class="two">div2</div>
	<div class="three">div3</div>
</div>
</div>
</body>
</html>

在这里插入图片描述

清除浮动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>子元素浮动对父元素的影响</title>
<style type="text/css"> 
.one,.two,.three{
	float:left;
	width:100px;
	height:100px;
	margin:10px;
	background: red;
}
.box{
	border:1px solid #ccc;
	background: blue;

   overflow:hidden;
}
</style>
</head>
<body>
<div>
<div class="box">
	<div class="one">div1</div>
	<div class="two">div2</div>
	<div class="three">div3</div>
</div>
</div>
</body>
</html>

在这里插入图片描述

神农尺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
元素的浮动 float

浮动属性（float）1.left：对象居左浮动，文本流向对象的右侧2.right：对象居右浮动，文本流向对象的左侧3.none：对象不浮动，默认值清除浮动clear：1.left：清除左侧浮动的影响2.right：清除右侧浮动的影响3.none：不清楚浮动，默认值4.both：同时清除左右两侧浮动的影响注：清除浮动后使元素独自占据一行，该方法不适用于清除子类元素浮动对父类元素...
复制链接

扫一扫