关于CSS浮动与取消浮动的问题
2021-07-11 16:54
991 查看
浮动的定义
设置元素脱离正常的文档流,使元素向左或向右靠近。父元素的边缘,或者其他设置了浮动的元素的边缘
浮动解决的问题
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> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <h1>这是一个标题</h1> <div></div> </body> </html>
到此这篇关于CSS浮动与取消浮动效果的文章就介绍到这了,更多相关CSS浮动与取消浮动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 关于CSS中浮动和定位问题的老生长谈
- 关于li标签浮动后文字和图片的对齐问题
- 关于微信授权登录的用户取消-2的问题
- css关于浮动的问题(导航条的做法)
- CSS浮动所差生的内容溢出问题及清除浮动的方法小结
- 关于DIV+CSS浮动问题的汇总[增加中]
- 关于在java中弹出确定取消的对话框问题
- 关于在java中弹出确定取消的对话框问题
- 关于vue-cli取消dev-server.js后, proxyTable代理配置问题解决
- CSS中关于清除浮动的问题
- 关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
- 关于浮动元素排版问题
- 关于float的值与浮动失效问题
- 关于设置浮动改变行内元素display属性的问题
- 笔记------关于浮动问题解决-使用overfrow: hidden
- VS2008中关于“加载安装组件时遇到问题。取消安装”的解决
- 关于IDEA发布web项目时出现JDBC驱动程序被强制取消注册问题的解决方案
- 关于hibernate中取消懒加载问题
- 关于Asynctask的取消、停止问题。
- CSS初学——关于窗口内容的定位以及浮动问题