• 前端CSS基础10（浮动）

    前端CSS基础10（浮动）

    浮动

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

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

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

    元素浮动后的特点

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

    DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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">1div>
        <div class="box box2">2div>
        <div class="box box3">3div>

    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    在这里插入图片描述
    浮动2后：
    在这里插入图片描述
    浮动3后
    在这里插入图片描述

    浮动后的特点

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

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

    浮动后的影响及解决

    影响：

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

    解决方案：

    • 方案一：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置clear:both;

    • 方案二：给浮动的父元素，设置伪元素，通过伪元素清除浮动，如下：（推荐使用）

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

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

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

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

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

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

    浮动布局小练习

    • 块元素共用一行就是浮动，不浮动的块元素就是独占一行。
    • 块元素本来就是独占一行，想让几个块元素并行则用到浮动。
    • 每用到浮动，就在父元素使用浮动消除，浮动消除代码如下：使用以下代码，只需要在使用浮动元素的父类元素加上一个class="clearfix"的类就行。
            .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

    • 1
    • 2
    • 3
    • 4
    • 5

    写布局的代码，写代码前先分好块
    在这里插入图片描述
    在这里插入图片描述
    块里面套块
    块块并排（多块占用一行）用浮动，一个块单独占一行不用浮动。记得父元素的浮动消除
    实现代码：

    DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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">logediv>
        <div class="banner1 leftfix">banner1div>
        <div class="banner2 leftfix">banner2div>
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128

    之前不太了解的点

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

    • 1
    • 2
    • 3
    • 4

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

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

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

  • 相关阅读:
    01Spring的Ioc思想和依赖注入手段(DI）
    SpringMVC学习笔记（十一）—— 拦截器
    编译OpenSSL注意事项
    spdlog 日志库部分源码说明——让你可以自定义的指定自动切换日志时间
    22 相交链表
    工具类-Queue、Deque类总结
    什么是鉴权？这些postman鉴权方式你又知道多少？
    1.2 Portfolio Theroy
    工具 - markdown编辑器常用方法
    毕业设计-基于机器视觉的安全帽佩戴识别系统
  • 原文地址：https://blog.csdn.net/qq_51752841/article/details/138171335