关于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实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
html粘性页脚的具体使用
Jan 18 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版)
2006/10/09 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP Include文件实例讲解
2019/02/15 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
python创建和删除目录的方法
2015/04/29 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
python实现电脑自动关机
2018/06/20 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Python实现粒子群算法的示例
2021/02/14 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
计算机本科生自荐信
2013/10/15 职场文书
领导证婚人证婚词
2014/01/13 职场文书
业务员简历自我评价
2014/03/06 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
医生见习报告范文
2014/11/03 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
《风筝》教学反思
2016/02/23 职场文书