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>

现在大家对于CSS浮动与取消浮动的使用应该都清楚了吧，上述示例有一定的借鉴价值，希望对大家学习CSS有帮助，想要了解更多CSS的使用技巧，大家可以关注群英网络其它相关文章。

文本转载自脚本之家