一天搞定CSS：浮动（float）的副作用--12

我会带着你远行 2022-06-16 08:21 123阅读 0赞

我们通常使用浮动来实现某些元素的布局，但是往往这些元素浮动会影响其他元素的布局，因此会产生副作用。

**如果你还不清楚什么是浮动，那就点开这个链接：**  
[http://blog.csdn.net/baidu\_37107022/article/details/71515984][http_blog.csdn.net_baidu_37107022_article_details_71515984]

## **浮动带来的副作用** ##

### 1. 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖，像这样 ###

![这里写图片描述][SouthEast]

### 2. 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间，像这样： ###

![这里写图片描述][SouthEast 1]

### 3. 浮动元素的父元素坍缩, 像这样： ###

![这里写图片描述][SouthEast 2]

> 如果我们不希望要这些效果，就需要清除浮动来解决后患，使后面的元素表现的跟浮动前一样，这样我们既实现了黄色元素浮动，又实现了后来的元素不会受其影响产生不必要的麻烦。

**清除浮动的方法，见下一节内容**

> **地址[http://blog.csdn.net/baidu\_37107022/article/details/71557806][http_blog.csdn.net_baidu_37107022_article_details_71557806]**

--------------------

[http_blog.csdn.net_baidu_37107022_article_details_71515984]: http://blog.csdn.net/baidu_37107022/article/details/71515984
[SouthEast]: /images/20220616/bb0d5754c73e45708109611360d6571b.png
[SouthEast 1]: /images/20220616/0a0cec304728440db0758d0423b478a7.png
[SouthEast 2]: /images/20220616/90945bd88b0d4049b5acd56a3738a129.png
[http_blog.csdn.net_baidu_37107022_article_details_71557806]: http://blog.csdn.net/baidu_37107022/article/details/71557806

发表评论取消回复

表情：

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

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

相关阅读

相关一天搞定CSS（扩展）：CSS Hack

做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推

电玩女神/ 2022年06月16日 12:14/ 0 赞/ 176 阅读

相关一天搞定CSS： overflow--14

overflow：针对超出父级的内容如何显示 ![这里写图片描述][SouthEast] 代码演示 <!DOCTYPE html> <html>

不念不忘少年蓝@/ 2022年06月16日 08:48/ 0 赞/ 151 阅读

相关一天搞定CSS：清除浮动（float）--13

上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。为什么要清楚浮动？ > 地址：[http://blog.csdn.net/baidu\_37107

╰半夏微凉°/ 2022年06月16日 08:23/ 0 赞/ 170 阅读

相关一天搞定CSS：浮动（float）的副作用--12

我们通常使用浮动来实现某些元素的布局，但是往往这些元素浮动会影响其他元素的布局，因此会产生副作用。如果你还不清楚什么是浮动，那就点开这个链接： [http://blog

我会带着你远行/ 2022年06月16日 08:21/ 0 赞/ 124 阅读

相关一天搞定CSS：浮动（float）与inline-block的区别--11

浮动： > 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。 inline-block: > inline-block是指行内块元素

今天药忘吃喽~/ 2022年06月16日 08:07/ 0 赞/ 125 阅读

相关一天搞定CSS：浮动（float）及文档流--10

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows

我会带着你远行/ 2022年06月16日 08:06/ 0 赞/ 151 阅读

相关一天搞定CSS：css选择器--07

选择器：是指选择标签的方法 1.选择器类型 ![这里写图片描述][SouthEast] 2.id选择器 ![这里写图片描述][SouthEast 1] 代码演

短命女/ 2022年06月16日 07:13/ 0 赞/ 188 阅读

相关一天搞定CSS：初识css--01

1）CSS：层叠样式表(英文全称：Cascading Style Sheets) 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的

ゝ一世哀愁。/ 2022年06月16日 05:00/ 0 赞/ 208 阅读

相关 CSS Float（浮动)

CSS Float（浮动) Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，

向右看齐/ 2022年06月09日 14:49/ 0 赞/ 273 阅读

相关【CSS】 Float(浮动)

什么是 CSS Float（浮动）？ ![在这里插入图片描述][20190129181403885.png] CSS 的 Float（浮动），会使元素向左或向右移动，

快来打我*/ 2022年04月23日 08:42/ 0 赞/ 302 阅读