CSS浮动float

chenatu 发布于2019-08-29 18:39 / 2550人阅读

摘要：从俯视图看似乎没有脱离文档流。元素像流水一样围绕着元素行内元素会围绕着浮动的元素进行排列清除浮动可以理解为打破横向排列。对于的清除浮动，一定要牢记这个规则只能影响使用清除的元素本身，不能影响其他元素。

参考教程（经验分享：CSS浮动(float,clear)通俗讲解）

首先了解一下标准文档流的排版：从上到下，从左到右，遇块换行

浮动可以理解为让某个div元素脱离文档流，漂浮在文档流之上

block元素无视float元素

啥意思呢，就是A和B两个block(块级)元素在排队买东西，A在前面，那么B只能遵守规则（标准文档流的遇块换行）突然A膨胀了，飘了，然后B就无视A,前进一步跑到A下面。

下图就是这种情况。

but，如果此时A没有浮动，而B浮动了，此时他只漂浮在自己的位置上方。从俯视图看似乎没有脱离文档流。

inline元素像流水一样围绕着float元素

行内元素会围绕着浮动的元素进行排列

清除浮动可以理解为打破横向排列。

语法：

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

例子：

假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

如果想要清除浮动，很多人在div1的CSS样式中添加clear:right;然而这样子是没有用的。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

所以在div2中CSS样式中添加clear:left;`

这时候才可以生效

GPU云服务器云服务器浮动-前端-css Floats Floating float

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

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

CSS Float nine rules

注：本文是对众多博客的学习和总结，可能存在理解错误。请带着怀疑的眼光，同时如果有错误希望能指出。如果你喜欢我的文章，可以关注我的私人博客:http://blog-qeesung.rhcloud.com/ 入门前端也算是有三个月之久了，发现Float这个属性一直都很迷惑，只是知道一些简单的浮动规则，并没有深入去学习，一旦遇到一点复杂的浮动场景，自己也就懵了。于是在网上找了数篇关于浮动的博客文章，加...

bingo 2019-08-29 10:59 评论0 收藏0
CSS Float nine rules

注：本文是对众多博客的学习和总结，可能存在理解错误。请带着怀疑的眼光，同时如果有错误希望能指出。如果你喜欢我的文章，可以关注我的私人博客:http://blog-qeesung.rhcloud.com/ 入门前端也算是有三个月之久了，发现Float这个属性一直都很迷惑，只是知道一些简单的浮动规则，并没有深入去学习，一旦遇到一点复杂的浮动场景，自己也就懵了。于是在网上找了数篇关于浮动的博客文章，加...

Nino 2019-08-01 15:28 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
了解CSS浮动以及清理浮动（Float）

摘要：浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS ...

TZLLOG 2019-08-28 18:08 评论0 收藏0
深入css布局 (2) — 定位与浮动

摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...

Crazy_Coder 2019-04-23 13:42 评论0 收藏0
CSS基础知识之float

摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的...

wuyangchun 2019-08-30 13:06 评论0 收藏0