CSS浮动
2019-04-26 本文已影响9人
暖A暖
在标准文档流中每一个块级元素，在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。
要实现浮动需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。
float属性
- 当float属性设置为right时，元素就会向其父元素的右侧移动、当float元素设置为left时，元素则会向向其父元素的左侧移动、当float为none的时候元素不会浮动；
我们来试一下在float值不同的情况下的浮动情况：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.father{
width:300px;
height:300px;
border:1px solid #000;
}
.father div{
width:100px;
height:100px;
}
.son1{
background-color:red;
}
.son2{
background-color:pink;
}
.son3{
background-color:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body>
</html>
-
我们在一个大的div容器father里面定义了三个小的div容器，分别是son1、son2、son3，如图所示，son1为红色、son2为粉色、son3为蓝色；
- 然后我们给son2加上一个
float:right;，我们发现son2向右边浮动了，且son3移动到了son2的位置，是因为son2向右浮动脱离了标准文档流，想要解决这个问题我们需要用到清除浮动；
- 再试试给son3给加上
float:right;，会有效果
其他的情况大家可以自己动手尝试一下，实践出真知~
清除浮动
我们知道当某些元素设置了浮动，在页面排版时会影响其他元素的位置，要解决这个问题我们需要使用到清除浮动，来消除浮动元素对其他元素的影响；
- 在css中一般使用clear元素来清除浮动，且可以规定元素哪一侧不允许其他浮动元素，属性值left表示在左侧不允许浮动元素、属性值right表示在右侧不允许浮动元素
、属性值both表示在左侧和右侧不允许浮动元素、属性值none表示允许浮动元素出现在两侧，默认值； - 还用上面的例子，之前我们设置son2向右浮动时，son3的位置也改变了，现在我们来通过具体操作，看看clear元素的具体使用和使用效果吧
# 在son3中增加clear:both;
.son3{
background-color:blue;
clear:both;
}
通过这个图片我们可以知道，给son3设置清除浮动后，son3就不会被son2影响了；
溢出处理
在网页中有时我们需要将内容放在一个固定大小的容器中，超出的部分隐藏起来，或者以带滚动条的窗口显示等，这些我们可以通过overflow属性来实现；
overflow的几个常用属性值：
-
visible：内容不会被修剪，会呈现在容器外面，也就是溢出，是默认的属性值；
-hidden：内容会被修剪，并且溢出部分不可见，也就是隐藏移除部分； -
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容； -
auto：如果内容被修剪，则浏览器会显示滚动条以便查看那其余内容；
我们通过代码操作来试一下，overflow的值不同时所呈现的效果；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.father{
width:250px;
height:250px;
border:2px solid #000;
/*让box在father中垂直居中*/
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:150px;
height:150px;
border:2px solid pink;
}
.title{
text-align:center;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
<p class="title">金陵酒肆留别</p>
<p>风吹柳花满店香，吴姬压酒劝客尝。</p>
<p>金陵子弟来相送，欲行不行各尽觞。</p>
<p>请君试问东流水，别意与之谁短长？</p>
</div>
</div>
</body>
</html>
- 当我们在.box选择器中设置
overflow:visible;时，呈现效果和不设置overflow是一样的，都会有内容溢出；
- 我们再试一下当.box选择器中设置
overflow:hidden;会是什么效果：
- 当.box选择器中设置
overflow:scroll;
