如何解除 CSS 的浮动状态以及需要注意的事项有哪些？

发布时间：2023-07-24 13:55:26 所属栏目：语言来源：

导读：今天给大家分享的是关于CSS浮动与取消浮动的内容，浮动在CSS中是比较实用的，但是很多新手朋友在刚接触使用的时候，常常会出现各种问题，因此这篇文章就给大家来介绍一下CSS浮动与取消浮动，及CSS浮动使用要注意的问

今天给大家分享的是关于CSS浮动与取消浮动的内容，浮动在CSS中是比较实用的，但是很多新手朋友在刚接触使用的时候，常常会出现各种问题，因此这篇文章就给大家来介绍一下CSS浮动与取消浮动，及CSS浮动使用要注意的问题，感兴趣的朋友接下来跟随小编一起看看吧。

    浮动的定义

    设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘

    浮动解决的问题

    1.解决文字包围图片的问题

    2.解决间隔问题

    3.可以向左，或者向右排版

    将文字排版到图片左端

    采用的属性

    采用的属性：float，属性值:right/left

    浮动的高度塌陷问题及解决方法高度塌陷问题

    当父元素设置的高度与子元素设置的高度不同时，则会出现高度塌陷问题，插入一些文字时无法插入在正确的位置

    高度塌陷导致标题无法出现在这个block的下方：

    解决过后：

    解决方法

    伪元素清除浮动：

    在父元素后设置伪元素清除浮动：

    1.根据父标签设置display

    2.再设置clear:both

    代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .parent{

            width: 400px;

            height: 400px;

            margin: 0 auto;

            display: block;

            background: lightgray;

        }

        .parent:after{

            content: "";

            display: block;

            clear: both;

        }

        .child{

            display: inline-block;

            width: 200px;

            height: 200px;

            background: lightblue;

            float: left;

        }

    </style>

</head>

<body>

<div class="parent">

    <div class="child"></div>

    <div class="child"></div>

    <div class="child"></div>

</div>

<h1>这是一个标题</h1>

<div></div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!