关于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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 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实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
js多个物体运动功能实例分析
2016/12/20 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
transform python环境快速配置方法
2018/09/27 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
幼儿园优秀教师事迹
2014/02/13 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
股份合作协议书
2014/09/10 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers