CSS浮动特点浮动盒子的尺寸排列方式及解决高度坍塌

浮动

视觉格式化模型,大体上将页面中的盒子的排列方式分为三种方式

  • 常规流
  • 浮动
  • 定位

应用场景

  1. 文字环绕
  2. 横向排列

浮动的基本特点

修改float属性值为:

  • left:左浮动,元素靠左靠上
  • right:右浮动,元素靠右靠上

默认值为none,不浮动

  1. 当一个元素速浮动后,元素必定为块盒(更改display属性为block)
    span元素浮动后,display会从原来的inline变为block
  2. 浮动元素的包含块和常规流一样,为父元素的内容盒

浮动盒子尺寸

  1. 宽度为auto时,适应内容宽度
  2. 高度为auto时,与常规流一致,适应内容的高度
  3. margin为auto,为0
  4. 边框、内边距、百分比设置与常规流一致
    常规流的边框、内边距的宽度设置为百分比为其包含块的宽度

盒子排列

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子靠上靠右排列
  3. 浮动盒子在包含块中排列时,会避开常规流块盒
  4. 常规流块盒在排列时,无视浮动盒子
  5. 行盒在排列时,会避开浮动盒子
  6. 外边距合并不会发生

如果文字没有在航何种,浏览器会自动生成一个行盒包裹文字,可以行盒看作是内容,文字是内容,文字一定在行盒里面,该行盒叫匿名行盒

高度坍塌

高度坍塌的原因:常规流盒子的自动高度在计算时,不会考虑浮动盒子
浮动盒子脱离了常规流,因此在计算时,不会考虑浮动盒子

解决高度坍塌

清除浮动,涉及css属性:clear

  • 默认值:none
  • left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
  • right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
    -both:清除左右浮,该元素必须出现在前面所有浮动盒子的下方

一般来说清除浮动有两种解决方案
1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background-color: lightblue;
            padding: 30px;
        }
        div ul li{
            width: 100px;
            height: 100px;
            background-color: red;
            list-style: none;
            border: 1px solid ;
            float: left;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <div class="clearfix"></div>
        </ul>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background-color: lightblue;
            padding: 30px;
        }
        div ul li{
            width: 100px;
            height: 100px;
            background-color: red;
            list-style: none;
            border: 1px solid ;
            float: left;
        }
        .clearfix{
           content: "";
           display: block;
           clear: both;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×