【响应式Web前端设计】CSS浮动(float,clear)讲解

末蓝、 2022-10-06 00:53 170阅读 0赞

**首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]  
可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。
    
       小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
    
       显然标准流已经无法满足需求，这就要用到浮动。      
    
       浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
    
       例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 1]  
从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。

这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。这里的靠左、靠右是说页面的左、右边缘。
    
       如果我们把div2采用右浮动，会是如下效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 2]  
此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

目前为止我们只浮动了一个div元素，多个呢？
    
       下面我们把div2和div3都加上左浮动，效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 3]  
同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。

**clear属性（清除浮动的影响）**  
**浮动的元素会影响到标准流中的元素所以要对受浮动影响的元素进行清除浮动的影响**  
clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.  
clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.  
clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70]: /images/20221005/0712745990ab4d91a57ebe77a3a372fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/6da4dff8356340e6b73111e3193e45dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/ca0a4e95bdac425da129ae745b450bf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgzODc4NQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/2db190adde9c41ecabe39539b272475f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关【Web前端】CSS-浮动详解

文章目录一、浮动 1、传统网页布局的三种方式 2、标准流（普通流/文档流） 3、为什么需要浮动？ 4、什么是

以你之姓@/ 2024年04月07日 12:54/ 0 赞/ 44 阅读

相关【web前端开发】CSS浮动

文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动方法

野性酷女/ 2023年09月27日 15:26/ 0 赞/ 84 阅读

相关【响应式Web前端设计】Register Demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

妖狐艹你老母/ 2022年11月14日 00:59/ 0 赞/ 146 阅读

相关【响应式Web前端设计】Login Demo

body{ background: url('../img/1.png')no-repeat center center fixed; backg

曾经终败给现在/ 2022年11月14日 00:52/ 0 赞/ 158 阅读

相关【响应式Web前端设计】CSS 定位详解

文章目录 1 position 属性的作用 2 static 属性值 3 relative，absolute，fixed 3.1 relat

骑猪看日落/ 2022年11月14日 00:50/ 0 赞/ 180 阅读

相关【响应式Web前端设计】HTML+CSS3 旋转齿轮特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

朱雀/ 2022年10月15日 11:58/ 0 赞/ 113 阅读

相关【响应式Web前端设计】CSS3 :nth-of-type() 选择器

<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { b

浅浅的花香味﹌/ 2022年10月06日 05:51/ 0 赞/ 138 阅读

相关【响应式Web前端设计】css中：overflow：hidden解决塌陷

overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。 1.我们给一个父元素，里面有两个子元素 ![在这里插入图片描述][202106

朱雀/ 2022年10月06日 00:55/ 0 赞/ 140 阅读

相关【响应式Web前端设计】CSS浮动(float,clear)讲解

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

末蓝、/ 2022年10月06日 00:53/ 0 赞/ 171 阅读

相关响应式Web设计

1、什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（vie

Bertha 。/ 2022年09月30日 09:57/ 0 赞/ 218 阅读