css中的clear和float

最新推荐文章于 2020-09-17 21:19:55 发布

Ma_D_Shy

最新推荐文章于 2020-09-17 21:19:55 发布

阅读量725

点赞数

分类专栏： W3C

本文链接：https://blog.csdn.net/Ma_D_Shy/article/details/46445387

版权

W3C 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

其实float很好理解，就是往一边移动（浮动），如果前面有浮动元素，则紧跟后面，否则直接浮动到最边（左|右）

所以困扰点的就是clear

按照个人思维去做，同时也让我陷入困境

这是w3c上面描述的clear属性的值是多少，下面来做一个代码测试（以clear:left为例）：

误区一：以为是消除具有float:left的元素

主要代码如下：

<html>

<head>
<style type="text/css">
img#img1
  {
  float:right;
  clear:left;
  }
img#img2
  {
  float:left;
  clear:left;
  }
img#img3
  {
  float:left;
  clear:left;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" id="img1" width="50" height="50"/>
<img src="/i/eg_smile.gif" id="img2" width="100" height="100"/>
<img src="/i/eg_smile.gif" id="img3" width="150" height="150"/>
</body>

</html>

运行结果如下：

从img2和img3可以看到这一个误区

误区二：以为是消除在其left一侧的元素

tml>

<head>
<style type="text/css">
img#img1
  {
  float:right;
  clear:left;
  }
img#img2
  {
  float:left;
  clear:left;
  }
img#img3
  {
  float:left;
  clear:left;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" id="img1" width="50" height="50"/>
<img src="/i/eg_smile.gif" id="img2" width="100" height="100"/>
<img src="/i/eg_smile.gif" id="img3" width="150" height="150"/>
</body>

</html>

结果如下：

从img1和img2可以认清这一个误区

误区三：以为是消除所有满足条件的元素

其实这里很简单，需要和正确理解做一下对比就可以知道

正确理解：

只能以前面存在的元素为依据进行控制，而不能控制后面的元素

从第二个误区例子可以得出后面的结论：不能控制后面元素

根据前面元素进行控制举例如下：

<html>

<head>
<style type="text/css">
img#img1
  {
  float:left;
  clear:left;
  }
img#img2
  {
  float:left;
  clear:left;
  }
img#img3
  {
  float:left;
  clear:left;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" id="img1" width="50" height="50"/>
<img src="/i/eg_smile.gif" id="img2" width="100" height="100"/>
<img src="/i/eg_smile.gif" id="img3" width="150" height="150"/>
</body>

</html>

结果如下：

从img1和img2可以看出，img2之所以会到下一行，是因为clear:left,而其left已经存在了img1，所以只有另起炉灶才可以满足左边没有浮动元素。

另注：如果将第二个误区的例子修改为clear:both会更加清晰的。

欢迎指正，同时转载请注明原址

Ma_D_Shy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的clear和float

其实float很好理解，就是往一边移动（浮动），如果前面有浮动元素，则紧跟后面，否则直接浮动到最边（左|右）所以困扰点的就是clear 按照个人思维去做，同时也让我陷入困境这是w3c上面描述的clear属性的值是多少，下面来做一个代码测试（以clear:left为例）：误区一：以为是消除具有float:left的元素主要代码如下：
复制链接

扫一扫