<!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 删除。