关于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 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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创建Cookie数组的详解
2013/07/03 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
linux面试相关问题
2013/04/28 面试题
单位创先争优活动方案
2014/01/26 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
2014年团总支工作总结
2014/11/21 职场文书
优秀团员个人总结
2015/02/26 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android