如果想要清楚浮动，那么首先你要弄清浮动产生的原因。本篇文章给大家归纳了浮动产生的原因以及副作用，还有最重要的，怎么清除浮动，清除浮动的方法。
一、浮动产生原因
一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。
简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生负作用
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
三、css解决浮动，清除浮动方法
这里为了统一讲解浮动解决方法，假设了有三个盒子对象，一个父级里包含了两个子级，子级一个使用了float:left属性，另外一个子级使用float:right属性。同时设置div css border，父级css边框颜色为红色，两个子级边框颜色为蓝色；父级CSS背景样式为黄色，两个子级背景为白色；父级css width宽度为400px，两个子级css宽度均为180px，两个子级再设置相同高度100px，父级css height高度暂不设置（通常为实际css布局时候这样父级都不设置高度，而高度是随内容增加自适应高度）。
父级CSS命名为“.div”对应html标签使用“
两个子级CSS命名分别为“.div-left”“.div-right”
根据以上描述DIV给出对应CSS代码和HTML代码片段
CSS代码：
.div{ width:400px; border:1px solid #F00; background:#FF0}
.div-left,.div-right{ width:180px; height:100px;
border:1px solid #00F; background:#FFF}
.div-left{ float:left}
.div-right{ float:right}对应html源代码片段：
<div class="div">
<div class="div-left">left浮动</div>
<div class="div-right">right浮动</div>
</div>以下总结了几点用于清除浮动的经验教程
1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对“.div”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px
CSS代码：
.div{ width:400px;border:1px solid #F00;background:#FF0; height:102px}
.div-left,.div-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.div-left{ float:left}
.div-right{ float:right}CSS高度设置清除浮动法
使用height高度清除浮动
小结，使用设置高度样式，清除浮动产生，前提是对象内容高度要能确定并能计算好。
2、clear:both清除浮动
为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“
具体CSS代码：
.div{ width:400px;border:1px solid #F00;background:#FF0}
.div-left,.div-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.div-left{ float:left}
.div-right{ float:right}
.clear{ clear:both}Html代码：
<div class="div">
<div class="div-left">left浮动</div>
<div class="div-right">right浮动</div>
<div class="clear"></div>
</div>使用CSS clear清除浮动
这个css clear清除float产生浮动，可以不用对父级设置高度 也无需技术父级高度，方便适用，但会多加CSS和HTML标签。
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
overflow:hidden解决CSS代码：
.div{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}
.div-left,.div-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.div-left{ float:left}
.div-right{ float:right}HTML代码不变。
为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。Css overflow:hidden清除浮动方法推荐使用。
以上三点即是兼容各大浏览器清除浮动的方法，其它有的浏览器不兼容有的不兼容的方法就没必要介绍了，大家记住以上三点解决float浮动清除浮动方法。但这里推荐第三点和第二点解决清除浮动方法。
相信阅读了这篇文章你已经万全了解了浮动这个属性，有需要的朋友可以保存一下，也请大家持续关注本站的其他更新。
相关阅读：
The above is the detailed content of How to clear floats in CSS. For more information, please follow other related articles on the PHP Chinese website!
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver Mac version
Visual web development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Chinese version
Chinese version, very easy to use
WebStorm Mac version
Useful JavaScript development tools
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
