关于CSS浮动与取消浮动的问题_CSS

上一篇: CSS3实现列表无限滚动/轮播效果下一篇:css3 利用transform-origin 实现...

关于CSS浮动与取消浮动的问题

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了关于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浮动与取消浮动的问题全部内容，希望文章能够帮你解决关于CSS浮动与取消浮动的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：CSS浮动

上一篇: CSS3实现列表无限滚动/轮播效果下一篇:css3 利用transform-origin 实现...

猜你在找的CSS相关文章