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


Posted in HTML / CSS onJune 28, 2021

浮动的定义

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

浮动解决的问题

1.解决文字包围图片的问题
2.解决间隔问题
3.可以向左,或者向右排版

将文字排版到图片左端

不采用浮动时:

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

采用浮动时:

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

采用的属性

采用的属性:float,属性值:right/left

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

当父元素设置的高度与子元素设置的高度不同时,则会出现高度塌陷问题,插入一些文字时无法插入在正确的位置
高度塌陷导致标题无法出现在这个block的下方:

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

解决过后:

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

解决方法

伪元素清除浮动:
在父元素后设置伪元素清除浮动:
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浮动与取消浮动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
html5调用摄像头实例代码
Jun 28 #HTML / CSS
CSS 伪元素::marker详解
深入理解margin塌陷和margin合并的解决方案
CSS实现章节添加自增序号的方法
CSS变量实现主题切换的方法
Jun 23 #HTML / CSS
CSS3实现列表无限滚动/轮播效果
HTML5页面音频自动播放的实现方式
Jun 21 #HTML / CSS
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
基于php下载文件的详解
2013/06/02 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
解决Mac下使用python的坑
2019/08/13 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python实现拼接图片
2020/03/23 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
人力资源部经理的岗位职责
2014/03/04 职场文书
药学职务聘任书
2014/03/29 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL