css元素浮动（float）,以及清除浮动。

最新推荐文章于 2022-10-24 10:34:19 发布

BYh_blog

最新推荐文章于 2022-10-24 10:34:19 发布

阅读量230

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/byhage1/article/details/103938170

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

<style>
	body{
	  padding: 0;
	  margin: 0;
	}
	#content{
	  width: 100%;
	  min-width: 500px;
	}
	.li{
	  width: 100px;
	  height: 100px;
	  text-align: center;
	  line-height: 100px;
	  border: 2px solid #e40b53;
	  float: left;
	}
	.lih{
	  width: 100px;
	  height: 100px;
	  text-align: center;
	  line-height: 100px;
	  border: 2px solid #555555;
	  /* clear: both; */
	}
</style>
<body>
    <div id="content">
      <div class="li">1</div>
      <div class="li">2</div>
      <div class="li">3</div>
      <div class="li">4</div>
      <div class="lih">5</div>
      <div class="lih">6</div>
      <div class="lih">7</div>
      <div class="lih">8</div>
    </div>
</body>

这里class为li 的元素是浮动元素，设置为左侧浮动，class为lih的四个元素不浮动，并且不清除浮动，你会发现，5和6在同一个位置，这就是浮动不清除的结果。

在这里插入图片描述

清除浮动后

在这里插入图片描述

BYh_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css元素浮动（float）,以及清除浮动。

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。<style> body{ padding: 0; margin: 0; } #content{ width: 100%; min-width: 500px; } .li{ width: 100px;...
复制链接

扫一扫

专栏目录