一、前端基础-css-css的属性操作二
原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- CSS属性操作二
1、float
2、clear
3、overflow
-->
<!-- 补充内容
1、正常文档流：将元素（标签）在进行排版布局的时候按从上到下，从左到右的的顺序排版的一个布局流。
2、脱离文档流：将元素从文档中取出，进行覆盖，其他元素会按文档流布局。
3、能够完成脱离文档流的属性：float（浮动）
position:absolute fixed(定位)
-->
<!-- float
1、float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2、left：元素向左浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。
3、right：元素向右浮动，如果前一个元素是正常文档流元素，保持垂直距离，如果是脱离文档流，紧跟在其后。文本内容不会被覆盖。
4、none：默认值。元素不浮动，并会显示在其在文本中出现的位置。
5、inherit：规定应该从父元素继承 float 属性的值。
-->
<p>前一个元素是正常文档流</p>
<div style="width: 100px;height: 100px;background-color: rebeccapurple">1</div>
<div style="width: 100px;height: 100px;background-color: blue;float: left">2</div>
<div style="width: 200px;height: 200px;background-color: yellow">3</div>
<br/>
<p>前一个元素是脱离文档流</p>
<div style="width: 100px;height: 100px;background-color: rebeccapurple;float: left">1</div>
<div style="width: 100px;height: 100px;background-color: blue;float: left">2</div>
<div style="width: 200px;height: 200px;background-color: yellow">3</div>
<!-- clear
1、left：清除左浮动
2、right：清除右浮动
3、both：全清除
-->
<br/>
<p>clear清除浮动</p>
<div style="background-color: blue">
<div style="float: left">菜单一</div>
<div style="float: left">菜单二</div>
<div style="clear: both"></div>
</div>
<div style="background-color: sienna;text-align: center">底部</div>
<!-- overflow
1、overflow 属性规定当内容溢出元素框时发生的事情。
2、visible：默认值。内容不会被修剪，会呈现在元素框之外。
3、hidden：内容会被修剪，并且其余内容是不可见的。
4、scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
5、auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
6、inherit：规定应该从父元素继承 overflow 属性的值。
-->
<br/>
<p>overflow</p>
<div style="background-color: blue;overflow: hidden">
<div style="float: left">菜单一</div>
<div style="float: left">菜单二</div>
</div>
<div style="background-color: sienna;text-align: center">底部</div>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读