浮动

yck 发布于2019-08-01 17:04 / 2891人阅读

摘要：浮动会导致父元素高度坍塌示例代码效果如上图所示，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度，导致父元素高度坍塌。

最近在学浮动的知识，下面总结了一些浮动的一些特征

1. 块级元素浮动将并排显示，不再独占一行

示例代码：




    
    
    
    Document

效果：

修改：

修改效果：

2. 内联样式浮动就可以设置宽高，不仅能够支持margin-left(right)，而且也支持margin-top(bottom)

示例代码：




    
    
    
    Document

效果：

修改：

修改效果：

3. 浮动元素脱离正常的文档流,普通元素会占据浮动元素的位置

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

4. 浮动会导致父元素高度坍塌

示例代码：




    
    
    
    Document

效果：

如上图所示，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度，导致父元素高度坍塌。

浮动元素对父元素的影响

对父容器若子元素都是浮动元素，则无法撑开父元素高度，父元素失去高度。

浮动元素其他浮动元素的影响

对其他浮动元素，如果包含块太窄，无法完全水平容纳浮动元素，那么其他浮动元素就会向下移动，直到有足够空间。如果浮动元素高度不同，那么向下移动时可能会被卡住。

示例代码1（块太窄，向下移动）：

效果：

示例代码2（卡住）:

效果：

浮动元素对普通元素的影响

普通元素会表现得当作浮动元素不存在一样，浮动元素可以覆盖普通元素，如果宽高合适，普通元素可以占据浮动元素原来的位置

对文字的影响

文字(既inline-level)级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样。

GPU云服务器云服务器 html浮动向上浮动上下浮动左右浮动表头浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50921.html

【CSS学习】--- float浮动属性

摘要：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。不浮动的浮动的三浮动之于块浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。一、前言　　浮动元素以脱离标准流的方式来实现元素的向左或向右浮动，并且浮动元素还是在原来的行上进行浮动的。float浮动属性的四个参数：left：元素向左浮动；right：元素向右浮动；none：默认值，元素不浮动；i...

TigerChain 2019-04-23 11:48 评论0 收藏0
关于浮动与清除浮动，你应该知道的

摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。首先总结几个基础的概念：浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]；文档流：在文档流中，块元素会单个元素独占一行接下来我们通过实...

mengbo 2019-08-29 10:57 评论0 收藏0
关于浮动与清除浮动，你应该知道的

摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。首先总结几个基础的概念：浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]；文档流：在文档流中，块元素会单个元素独占一行接下来我们通过实...

masturbator 2019-08-19 18:40 评论0 收藏0
关于浮动与清除浮动，你应该知道的

摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。首先总结几个基础的概念：浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]；文档流：在文档流中，块元素会单个元素独占一行接下来我们通过实...

Donald 2019-08-01 15:23 评论0 收藏0
关于浮动与清除浮动，你应该知道的

摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。首先总结几个基础的概念：浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]；文档流：在文档流中，块元素会单个元素独占一行接下来我们通过实...

ideaa 2019-06-27 13:59 评论0 收藏0