<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 浮动
css三种布局机制
1 --普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列;
常用元素:div hr p h1-h6 ul ol dl form table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则会自动换行
常用元素:span a i em等
2 --浮动
- 让盒子从普通流中浮起来,主要作用是让多个块级盒子在一行显示
3 --定位
- 将盒子定在浏览器的某一个位置 css离不开定位 特别是后面的js特
为什么需要浮动
--为了让块级元素一行显示
-但是我们可以将块级元素转换成行内块元素display:inline-block;从而实现块级元素一行显示
-但是行内块元素之间从中一些间隙,不好处理,即使处理掉也存在兼容性问题,故需要浮动
-而浮动就可以将块级元素在一行显示,而且彼此之间不存在间隙
浮动概念:
设置了浮动属性的元素会
1 脱离标准流控制;
2 移动到指定位置
浮动作用:
1 让多个盒子水平排列一行,浮动成为布局的重要手段
2 可以实现盒子左右对齐等;
3 浮动最早用来控制图片,实现问题环绕图片的效果。
浮动语法:
选择器 {float: 属性值;}
属性值:
none 表示元素不浮动
left 表示元素左浮动
right 表示元素右浮动
浮动元素特性:
1 浮动:浮动元素漂浮在普通流上面 脱离标准流了
2 浮动的盒子不占有原来的位置,把位置流给后面标准流元素,俗称 脱标
3 float属性会改变元素display属性 块级元素添加浮动后将会拥有行内块元素的特性(1宽度由元素内的内容决定 2可以在一行显示 这也是浮动为什么能在一行显示的原理)
4 多个盒子同时添加浮动将在一行显示,且之间没有间隔,而行内块元素有间隔(区别)
5 如果父级宽度装不下这些浮动的盒子的宽度(即浮动的盒子宽度加起来超过父亲宽度) 多出的浮动盒子将在另一行对齐
浮动元素与父级元素盒子之间的关系
1 浮动的子盒子位置参照父盒子对齐
2 浮动的子盒子不会与父盒子边框重叠,也不会超过父盒子内边距
浮动盒子与兄弟盒子关系:
-- 在父级盒子中 当前元素浮动,
- 若前一个盒子也浮动 那么当前浮动的元素盒子与前一个顶部对齐
- 若前一个盒子不浮动 那么当前浮动盒子在前面标准流盒子下面显示
-- 所以浮动只会影响当前或者后面的盒子,不会影响前面的标准流
清除浮动
为什么要清除浮动
-- 在通常的布局中我们需要利用浮动和标准流结合使用
但是浮动元素不保留原来位置,影响后面标准流元素的布局
故将浮动元素放到标准流父级元素中,但是父级盒子很多情况下不方便给高度,这样导致
里面的浮动盒子不占位置,父级盒子将失去高度,影响下面标准流盒子布局
标准流中父盒子高度不给的话,会按照子盒子高度撑开
清除浮动的本质
-- 清除浮动主要是解决父级元素以为子级元素浮动导致高度为0的情况
清除浮动之后,父级盒子会自动检测子盒子高度,父级盒子有了高度
就不会影响下面的标准流布局了
清除浮动方法:
-- 语法:
选择器{clear: 属性值} 属性值有left right both
- 方法1 额外标签法:是W3C推荐的做法,是通过在浮动元素末尾添加一个空标签
<div style="clear: both"></div> 缺点:增加额外标签
- 方法2 父级添加overflow属性 可以给父级添加overflow为hidden auto scroll 都可以实现
优点:代码简洁 缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的部分的元素
- 方法3 使用after伪元素清除浮动
:after方式为空元素额外标签法的升级版,好处是不用单独加标签
使用方法:
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
IE6、7专用
*zoom:1;
}
- 方法4 使用双伪元素清除浮动
代码:
.clearfix:before,
.clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
什么情况下需要清除浮动总结:
1 父级没有高度
2 子盒子有浮动
3 影响下面布局
*/
/* div {
display: inline-block;
width: 200px;
height: 200px;
background-color: #000;
}
.two {
background-color: pink;
}
.top {
float: left;
width: 300px;
height: 300px;
background-color: green;
}
.button {
display: block;
width: 500px;
height: 500px;
background-color: blue;
} */
.box1 {
/* 块级元素不给宽度默认和浏览器一样宽 */
/* 添加一个浮动 */
float: left;
height: 50px;
background-color: #456464;
}
.left,
.right {
width: 200px;
height: 200px;
background-color: #654546;
float: left;
}
.right {
float: right;
}
.father {
padding: 50px;
border: 20px solid red;
width: 500px;
height: 500px;
background-color: #645645;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.one {
/* 清除浮动方法2 */
/* overflow: hidden; */
border: 1px solid red;
width: 500px;
/* height: 500px; */
margin: auto;
}
.boxA,
.boxB {
float: left;
width: 250px;
height: 250px;
background-color: #645666;
}
.boxB {
background-color: pink;
}
.two {
width: 800px;
height: 200px;
background-color: blue;
margin: auto;
}
/* 清除浮动方法1:额外标签法 */
.clear {
clear: both;
}
/* 清除浮动方法3 声明清除浮动样式 */
/* .clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
IE6 7 专门清除浮动样式
*zoom: 1;
} */
/*清除浮动方法4 双伪元素清除法*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<!-- <div></div>
<div class="two"></div>
<div></div>
<div class="top"></div>
<div class="button"></div>
<div class="box1">123</div>
<div class="left"></div>
<div class="right"></div> -->
<!-- <div class="father">
<div class="son"></div>
</div> -->
<div class="one clearfix">
<div class="boxA"></div>
<div class="boxB"></div>
<!-- <div class="clear"></div> -->
</div>
<div class="two"></div>
</body>
</html>