HTML5中块级元素float浮动总结

三亚通 發表於 2020-9-7 17:31:00

1.float属性
在CSS中，任何元素都可以浮动，无论是块级元素还是行内元素，设置浮动后可以设置宽高（width,height）。
<table class="dataintable">
<tbody>
<tr><th style="text-align: left">值</th><th>描述</th></tr>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">元素向左浮动。</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">元素向右浮动。</td>
</tr>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">默认值。元素不浮动，并会显示在其在文本中出现的位置。</td>
</tr>
<tr>
<td style="text-align: left">inherit</td>
<td style="text-align: left">规定应该从父元素继承 float 属性的值。</td>
</tr>
</tbody>
</table>
 HTML5中的块级元素默认要独占一行，无论当前块元素的宽度是多少。
2.简单示例
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float用法</title>
<style>
 #container {
 border: 1px solid rgb(163, 163, 163);
 background-color: #ddd;
 width: 800px;
 }

 #block1 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(233, 142, 142);
 width: 200px;
 height: 150px;

 }

 #block2 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(145, 233, 142);
 width: 300px;
 height: 180px;

 }

 #block3 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(241, 94, 241);
 width: 260px;
 height: 120px;

 }


</style>
</head>

<body>
<div id="container">
 <div id="block1">block1</div>
 <div id="block2">block2</div>

</div>
<div id="block3">block3</div>
</body>

</html></pre>
</div>
 
效果图
 <img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907151528520-1206264846.png">
 
 
 （1）container块没有设置高度
（2）block1块和block2放置于container块中，block3块置于container块之外。
 2.1设置第一个块block1浮动
<div class="cnblogs_code">
<pre> #block1
 {
 border:1px solid rgb(163, 163, 163);
 background-color: rgb(233, 142, 142);
 width: 200px;
 height: 150px;
 /* 浮动到左边 */
 float: left;
 }</pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907152013617-1568401869.png">
 block1块脱离文档流浮动到父容器container的左上角，block2块和block3块默认向上移动到原来block1位置，显示出来的效果就是block1盖住了block2。大概是下图这个意思吧。
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200903155855052-1312385570.png">
 
 
  2.2设置block1浮动到左边，block2浮动到右边
<div class="cnblogs_code">
<pre> #block1 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(233, 142, 142);
 width: 200px;
 height: 150px;
 /* 浮动到左边 */
 float: left;
 }

 #block2 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(145, 233, 142);
 width: 300px;
 height: 180px;
 /* 浮动到右边 */
 float: right;
 }</pre>
</div>
效果图
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907152249742-1667468995.png">
 
 
 
 
block1块和block2块都浮动起来了，两个块的高度都比block3高，所以block3顶到文档的最上面，被block1块和block2块盖住。
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200903163106085-1575859908.png">
 
 2.3清除浮动(clear)
clear 属性规定元素的哪一侧不允许其他浮动元素。
<table class="dataintable">
<tbody>
<tr><th>值</th><th>描述</th></tr>
<tr>
<td>left</td>
<td>在左侧不允许浮动元素。</td>
</tr>
<tr>
<td>right</td>
<td>在右侧不允许浮动元素。</td>
</tr>
<tr>
<td>both</td>
<td>在左右两侧均不允许浮动元素。</td>
</tr>
<tr>
<td>none</td>
<td>默认值。允许浮动元素出现在两侧。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 clear 属性的值。</td>
</tr>
</tbody>
</table>
 
 clear清除浮动的原理（转自：https://blog.csdn.net/weixin_41796631/article/details/89425006）
（1）设置了 clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起。
（2）比如说，如果一个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整自己，排到下一行去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下一行，同时往左浮动。
（3）如果设置了clear: right，也无法清除右边的元素。因为元素只能调整自身，不能移动别的元素。所以右边即使有浮动元素，也无法清除。
w3.org官方的解释是：「元素盒子的边不能和前面的浮动元素相邻」。我理解这句话其实就是调到前面元素的下一行，让左右两边不与前面的元素相邻。
 
2.4清除浮动的4种方法
（1）设置block3块的clear属性
<div class="cnblogs_code">
<pre>#block3 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(241, 94, 241);
 width: 260px;
 height: 120px;
 /* 清除左边浮动 */
 clear:left;
 }</pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907152526078-1876998343.png">
 
 
 
<div class="cnblogs_code">
<pre>#block3 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(241, 94, 241);
 width: 260px;
 height: 120px;
 /* 清除右边浮动 */
 clear:right;
 }</pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907152711426-2076110189.png">
（2）在block2块后面添加一个空div，这个空 div 的样式添加 clear：both。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float用法</title>
<style>
 #container {
 border: 1px solid rgb(163, 163, 163);
 background-color: #ddd;
 width: 800px;
 }

 #block1 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(233, 142, 142);
 width: 200px;
 height: 150px;
 /* 浮动到左边 */
 float: left;
 }

 #block2 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(145, 233, 142);
 width: 300px;
 height: 180px;
 /* 浮动到右边 */
 float: right;
 }

 #block3 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(241, 94, 241);
 width: 260px;
 height: 120px;

 }

 .clearfix{
 clear: both;
 }

</style>
</head>

<body>
<div id="container">
 <div id="block1">block1</div>
 <div id="block2">block2</div>
 <div class="clearfix"></div>
</div>

<div id="block3">block3</div>
</body>

</html></pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907153021336-290527476.png">
 
 样式名为clearfix的块写在了container块里面，当清除浮动时，父元素container的高度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在文档流内，所以父元素只能自动增加高度，其背景颜色就显示出来了。
如果将clearfix的块写在了container块外面，则父元素container的高度不能被撑起来，如下图所示：
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907153755405-604685019.png">
（3）为父元素添加overflow属性
overflow属性
<table class="dataintable">
<tbody>
<tr><th>值</th><th>描述</th></tr>
<tr>
<td>visible</td>
<td>默认值。内容不会被修剪，会呈现在元素框之外。</td>
</tr>
<tr>
<td>hidden</td>
<td>内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td>scroll</td>
<td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>auto</td>
<td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 overflow 属性的值。</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre> #container {
 border: 1px solid rgb(163, 163, 163);
 background-color: #ddd;
 width: 800px;
 /* 父元素加上overflow属性 */
 overflow: auto;
 }</pre>
</div>
效果如下图，此时已经默认清除了浮动。
<img src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907171513415-320859027.png">
 
 （以下内容转自：https://blog.csdn.net/h_qingyi/article/details/81269667）
（4）使用 after 伪元素清除浮动（推荐使用）
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_4166f7d7-d84d-4ecb-8728-927786be21e1" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_4166f7d7-d84d-4ecb-8728-927786be21e1" class="cnblogs_code_hide">
<pre><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float用法</title>
<style>
 #container {
 border: 1px solid rgb(163, 163, 163);
 background-color: #ddd;
 width: 800px;
 }

 #block1 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(233, 142, 142);
 width: 200px;
 height: 150px;
 /* 浮动到左边 */
 float: left;
 }

 #block2 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(145, 233, 142);
 width: 300px;
 height: 180px;
 /* 浮动到右边 */
 float: right;
 }

 #block3 {
 border: 1px solid rgb(163, 163, 163);
 background-color: rgb(241, 94, 241);
 width: 260px;
 height: 120px;

 }

 .clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/
 content: "";
 display: block;
 height: 0;
 clear:both;
 visibility: hidden;
}
 .clearfix{
 *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }


</style>
</head>

<body>
<div id="container" class="clearfix">
 <div id="block1">block1</div>
 <div id="block2">block2</div>
</div>

<div id="block3">block3</div>
</body>

</html></pre>
</div>
View Code</div>
起作用的代码如下：
<div class="cnblogs_code">
<pre> .clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/
 content: "";
 display: block;
 height: 0;
 clear:both;
 visibility: hidden;
}
 .clearfix{
 *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }</pre>
</div>
效果图：
<img alt="" width="669" height="332" loading="lazy" src="https://img2020.cnblogs.com/blog/736328/202009/736328-20200907172435231-1241243623.png">
（5）使用before和after双伪元素清除浮动（推荐使用）
<div class="cnblogs_code">
<pre> .clearfix:after,
 .clearfix:before {
 content: "";
 display: table;
 }

 .clearfix:after {
 clear: both;
 }

 .clearfix {
 *zoom: 1;
 }</pre>
</div>
效果与上面相同。
（6）给浮动元素父级设置高度
 （7）设置父元素同时浮动
（8）父元素设置成inline-block
（9）br 标签清除浮动
参考文章：
https://www.w3school.com.cn/cssref/pr_class_float.asp
https://blog.csdn.net/nanjinzhu/article/details/82716522
https://blog.csdn.net/weixin_34062469/article/details/91721757
https://blog.csdn.net/linysuccess/article/details/53432568
https://blog.csdn.net/qq_42039588/article/details/100982293
https://blog.csdn.net/sunny1996/article/details/68959176
https://blog.csdn.net/weixin_41796631/article/details/89425006
https://blog.csdn.net/weixin_43990215/article/details/95166061?utm_medium=distribute.pc_relevant.none-task-blog-title-1&spm=1001.2101.3001.4242
https://blog.csdn.net/weixin_34072857/article/details/91372246?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param
https://www.cnblogs.com/nxl0908/p/7245460.html
 

</div>
<div id="MySignature" role="contentinfo">
转载文章链接已标明，如有侵权请告知。文章仅作为知识记忆所用，如有错误，敬请指正。 
来源：https://www.cnblogs.com/YorkZhangYang/p/13606383.html

頁: [1]

琼殿技术论坛's Archiver

HTML5中块级元素float浮动总结