网页浮动的解析

Posted 2020-11-19 bk1234

一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

二.display属性

display:更改块级元素和行内元素的相互转换
block：块级元素的默认值
inline：行内元素的默认值
inline-block:同时具有行内和块级元素的特性
none：隐藏元素内容

三.float浮动

left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其文本中出现的位置
<style type="text/css">
.layer01{
float: left;
}
.layer02{
float: right;
}

</style>

四.clear清除浮动

left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
<style type="text/css">
.layer01{
clear:left;
}
.layer01{
clear:right;
}
.layer01{
clear:both;
}
</style>

五.解决父级边框塌陷的方法

1.浮动元素后面加空div
<div class="layer05">
<style type="text/css">
.layer05{
clear: both;
}

</style>

2.设置父元素的高度
<style type="text/css">
#father{
height: 500px;
}
</style>

3.父级添加overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
<style type="text/css">
#father{
overflow: hidden;
}
</style>

4.父级添加伪类after
<div id="father" class="clear"></div>
<style type="text/css">
.clear:after{
content: ‘‘; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
</style>

六.inline-block和float的区别

display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式