前端CSS基础10（浮动）

浮动
浮动布局小练习

浮动

CSS中的浮动是一种布局技术，常用于实现元素的排列和定位。通过使用float属性，可以让元素在页面中左浮动或右浮动，使得其他内容围绕该元素布局。

在 CSS 中，可以使用 float 属性来使元素浮动。浮动的元素会脱离正常文档流，可以向左或向右移动，并尽可能靠近其相邻的浮动元素。

float 属性的常见取值包括：

left：元素向左浮动。
right：元素向右浮动。
none：默认值

元素浮动后的特点

浮动前：如以下代码，2号浮动前

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .outer{
            width: 400px;
            height: 400px;
            background-color:aqua;
            padding: 10px;
        }
        .box{
            font-size: 20px;   
            padding: 10px;
        }
        .box1{
            background-color:yellow;
        }
        .box2{
            background-color:antiquewhite;
            /* float: left;*/
        } 
        .box3{
            background-color:blue;
        }
        span{
            background-color: brown;
            font-size: 40px;
            vertical-align: middle;
        }
        img{
            height: 200px;
            float: left;
            margin-right: 0.5em;
        }
        .text::first-letter{
            font-size: 80px;
            float: left;

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>

    </div>
</body>
</html>

浮动2后：

浮动3后

浮动后的特点

CSS 元素浮动后具有以下特点：

脱离文档流：浮动元素会脱离正常文档流，不再占据原本的空间，而是向左或向右移动，允许其他内容环绕在其周围。（浮空）
**元素重叠：**浮动元素会尽可能靠近相邻的浮动元素，导致元素重叠。这通常会影响页面布局，需要通过清除浮动或其他方法来处理重叠的情况。
不会独占一行，可以与其他元素共用一行。
**高度塌陷：**父元素的高度可能因为子元素浮动而无法被正常撑开，造成高度塌陷的问题。可以使用清除浮动的技术解决这个问题。
**文本环绕：**浮动元素可以使文本环绕在其周围，创造出独特的设计效果。
浮动清除：为了避免浮动元素导致的布局问题，通常会使用清除浮动技术，包括清除浮动的伪元素、clear 属性等方法。
不管浮动前是什么元素，浮动后，默认宽和高都是被内容撑开（尽可能小），而且可以设置宽和高。
可以正常的设置四个方向的margin和padding。

浮动后的影响及解决

影响：

对兄弟的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起来父元素的高度，导致父元素高度塌陷；但是父元素的宽度依然束缚浮动的元素。

解决方案：

方案一：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both;
方案二：给浮动的父元素，设置伪元素，通过伪元素清除浮动，如下：（推荐使用）

css 复制代码

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

clear 属性用于指定元素哪些方向的浮动元素是不允许靠近的。它只会对前面有浮动元素的元素生效。

以下是 clear 属性的属性值及功能：

clear: left;：表示元素的左侧不允许存在浮动元素。如果左侧有浮动元素，这个元素将被清除浮动，并显示在浮动元素下方。

clear: right;：表示元素的右侧不允许存在浮动元素。如果右侧有浮动元素，这个元素将被清除浮动，并显示在浮动元素下方。

clear: both;：表示元素两侧都不允许存在浮动元素。即使左右两侧都有浮动元素，这个元素也会被清除浮动，并显示在所有浮动元素下方。

clear: none;：默认值，表示元素两侧都可以存在浮动元素，不会清除任何浮动
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

浮动布局小练习

块元素共用一行就是浮动，不浮动的块元素就是独占一行。
块元素本来就是独占一行，想让几个块元素并行则用到浮动。
每用到浮动，就在父元素使用浮动消除，浮动消除代码如下：使用以下代码，只需要在使用浮动元素的父类元素加上一个class="clearfix"的类就行。

css 复制代码

        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

写布局的代码，写代码前先分好块

块里面套块

块块并排（多块占用一行）用浮动，一个块单独占一行不用浮动。记得父元素的浮动消除

实现代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .leftfix{
            float: left;
        }
        .rightfix{
            float: right;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .container{
            width:960px;
            margin:0 auto;
            text-align: center;
            }
        .loge{
            width:200px;
        }
        .banner1{
            width:540px;
            margin:0px 10px;
        }
        .banner2{
            width:200px;
        }
        .loge,.banner1,.banner2{
            height: 80px;
            background-color: #ccc;
            line-height: 80px;
        }
        .menu{
            height: 30px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 30px;
        }
        .item1,.item2{
            width: 368px;
            height: 198px;
            border: 1px solid #ccc;
            line-height:198px;
            margin-right: 10px;
        }
        .content{
            margin-top:10px;
        }
        .item3,.item4,.item5,.item6{
            width: 178px;
            height: 198px;
            border: 1px solid #ccc;
            margin-right: 10px;
            line-height: 198px;

        }
        .bottom{
            margin-top: 10px;
        }
        .item7,.item8,.item9{
            width: 188px;
            height: 128px;
            border: 1px solid #ccc;
        }
        .item7,.item8{
            margin-bottom: 10px;
        }
        .foot{
            width: 960px;
            height: 60px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 58px;
        }
    </style>
</head>
<body>
    <!-- 整体 -->
<div class="container ">
        <!-- 头部 -->
    <div class="page-header clearfix">
        <div class="loge leftfix">loge</div>
        <div class="banner1 leftfix">banner1</div>
        <div class="banner2 leftfix">banner2</div>
    </div>
    <!-- 菜单 -->
    <div class="menu">菜单</div>
    <!-- 内容区 -->
    <div class="content clearfix">
        <!-- 内容区左 -->
        <div class="left leftfix ">
            <!-- 内容区上半部分 -->
            <div class="top clearfix">
                <div class="item1 leftfix">栏目一</div>
                <div class="item2 leftfix">栏目二</div>
            </div>
            <!-- 内容区下半部分 -->
            <div class="bottom clearfix">
                <div class="item3 leftfix">栏目三</div>
                <div class="item4 leftfix">栏目四</div>
                <div class="item5 leftfix">栏目五</div>
                <div class="item6 leftfix">栏目六</div>
            </div>
        </div>
        <!-- 内容区右 -->
        <div class="right rightfix">
            <div class="item7">栏目七</div>
            <div class="item8">栏目八</div>
            <div class="item9">栏目九</div>
        </div> 
    </div>
    <!-- 页脚 -->
    <div class="foot">页脚</div>

</div>

</body>
</html>

之前不太了解的点

html 复制代码

        *{
            margin: 0px;
            padding: 0px;
        }

在CSS中，*{ margin: 0px; padding: 0px; }的作用是移除所有HTML元素的外边距（margin）和内边距（padding）。

外边距（margin）是指元素周围的空白区域，用于控制元素与其他元素之间的间距。而内边距（padding）是指元素内容与边框之间的空白区域，用于控制元素内部内容的间距。

通过将margin和padding都设置为0，可以消除所有元素的外边距和内边距，使页面布局更加紧凑。这在某些情况下可能是有用的，例如当你想要创建一个自定义的布局或者去除默认的浏览器样式时。