CSS浮动问题怎样处理，与取消浮动怎样实现

发布时间：2023-09-18 10:08:38 所属栏目：语言来源：

导读：这篇文章给大家分享的是“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>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!