CSS浮动与取消浮动怎样实现？CSS浮动使用要注意什么？
发布时间：2022-02-14 13:44:04 所属栏目：语言 来源：互联网
导读：今天给大家分享的是关于CSS浮动与取消浮动的内容，浮动在CSS中是比较实用的，但是很多新手朋友在刚接触使用的时候，常常会出现各种问题，因此这篇文章就给大家来介绍一下CSS浮动与取消浮动，及CSS浮动使用要注意的问题，感兴趣的朋友接下来跟随小编一起看看
|
今天给大家分享的是关于CSS浮动与取消浮动的内容，浮动在CSS中是比较实用的，但是很多新手朋友在刚接触使用的时候，常常会出现各种问题，因此这篇文章就给大家来介绍一下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> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <h1>这是一个标题</h1> <div></div> </body> </html>  （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
