css浮动

最新推荐文章于 2024-10-29 22:55:09 发布

weixin_30326515

最新推荐文章于 2024-10-29 22:55:09 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Yimi/p/5868492.html

本文详细介绍了CSS中的浮动概念及其应用。通过实例演示了如何使用浮动使多个div元素在同一行显示，探讨了浮动元素如何影响页面布局及如何清除浮动的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）可以看出，即使div1 的宽度很小，页面中一行可以容下div1 和div2，div2 也不会排
在div1 后边，因为div 元素是块级元素，独占一行的。
2）如何在一行显示多个div 元素
3）显然默认的标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个div
元素（或者其他块级元素）脱离标准流，漂浮在标准流之上。
4）例如，假设上图中的div2 浮动，那么它将脱离标准流，但div1、div3、div4 仍然在标
准流当中，所以div3 会自动向上移动，占据div2 的位置，重新组成一个流。如

float:left;/*向左边浮动*/

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮动</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

clear:left;/*清除左浮动*/

clear:both;不允许浮动

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <title>css浮动</title>
    <style type="text/css">
        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
                clear:left;/*清除左浮动*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;} 
        
        
</style>
  </head>
  <body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
  </body>
</html>

如果连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。

        #div1 {
        width:200px;
        height:100px;
        background:#9900FF;
        float:left;/*向左边浮动*/} 
                #div2 {
        width:500px;
        height:60px;
        background:#00AAAA;
        float:left;/*向左边浮动*/} 
                #div3 {
        width:170px;
        height:100px;
        background:#CCCCFF;
        float:left;/*向左边浮动*/} 
                #div4 {
        width:90px;
        height:90px;
        background:#D87093;
        float:left;/*向左边浮动*/}