css浮动和位置讲解(关于CSS浮动与取消浮动的问题)
类别:Web前端 浏览量:241
时间:2021-11-05 14:36:49 css浮动和位置讲解
关于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> <li class="parent"> <li class="child"></li> <li class="child"></li> <li class="child"></li> </li> <h1>这是一个标题</h1> <li></li> </body> </html>
到此这篇关于CSS浮动与取消浮动效果的文章就介绍到这了,更多相关CSS浮动与取消浮动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css浮动位置讲解(深入理解css布局之定位与浮动)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- css浮动边距加倍错误怎么办(详解CSS外边距折叠引发的问题)
- cssfloat和position功能(理解CSS浮动float、定位position)
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- css浮动和位置讲解(关于CSS浮动与取消浮动的问题)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
热门推荐
- dedecms漏洞防范(浅析DedeCMS投票模块漏洞的解决方法)
- label标签的作用
- sql server查询语句语法(详解SQL Server的简单查询语句)
- php导出excel使用方法(PHP使用ajax的post方式下载excel文件简单示例)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- MVC 使用FileResult导出文件
- 阿里云服务器ecs入口(阿里云服务器ECS共享型和计算型有什么区别?)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- nginx配置文件位置(查看nginx配置文件路径和资源文件路径的方法)
- docker如何搭建gitlab(docker+gitlab+gitlab-runner部署详解)