设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘
1.解决文字包围图片的问题
2.解决间隔问题
3.可以向左，或者向右排版
不采一周多少天用浮动时：
采用浮动时：
采用的属性
采用的属性：float，属性值:right/left
浮动的高度塌陷问题及解决方法 高度塌陷问题
当父元素设置的高度与子元素设置的高度不同时，则会出现高度塌陷问题，插入一些文字时无法插入在正确的位置
高度塌陷导致标题无法出现在本来面目这个block的下方：
解决过后：
解决方法
伪元素清除浮动：
在父元素后设置伪元素清除浮动：
1.根据父标签设置display
2.再设置clear:both
代码：
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title> <style type="text/css"> .parent{ widt反三角函数h: 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"> <di中秋祝福语走心v class="child"></div> <div class="child"></div> <div class="child"></div></div><h1>这是一个标题</h1><div></div></body></html>到此这篇关于css浮动与取消浮动效果的文章就介绍到这了,更多相关css浮动与取消浮动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 21:10:23，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1d4efbeffe1464e2fafd5982c90aef08.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：关于CSS浮动与取消浮动的问题.doc
本文 PDF 下载地址：关于CSS浮动与取消浮动的问题.pdf
| 留言与评论（共有 0 条评论） |
