Rumah >hujung hadapan web >tutorial css >css浮动的原理
css浮动的原理
- 无忌哥哥asal
- 2018-06-29 09:14:022900semak imbas
一、浮动与绝对定位的相同之处:
1. 浮动元素也脱离了文档流
2. 元素浮动之后都支持了宽高,变成了块元素,
二、浮动的特点:只能沿着水平方向进行;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.浮动的原理</title>
<style>
.box1 {
width:200px;
height: 200px;
background-color: lightskyblue;
/*设置左浮动*/
/*下面绿色块看不到了,因为浮动元素脱离了文档流,绿色自动上移占据了原来蓝色块的位置*/
/*如果想看到绿色块,只要将绿色块宽高调整大一点就可以*/
/*float:left;*/
}
.box2 {
width:200px;
/*width:250px;*/
height: 200px;
/*height: 250px;*/
background-color: lightgreen;
/*
如果第二个色块也浮动的话:它会紧贴着第一个浮动的元素,这是为什么呢?
因为第二个色块也脱离了文档流,与第一个是在同一个平面中,这点对排版很重要
*/
float:left;
}
.box3 {
width:200px;
height: 200px;
background-color: lightcoral; /*珊瑚色*/
/*下面浮动第三个色块*/
/*float:left;*/
/*浮动还可以向右进行,它会一直向右侧移动,直到碰到窗口最右侧停止*/
/*float:right;*/
}
.text {
width: 100px;
height: 100px;
background-color: yellow;
/*将行内元素进行浮动后,将会脱离文档流,从而使其支持宽高设置*/
/*float:left;*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<!-- <span>是行内元素,它的宽高由内部文本决定,不支持用户自定义宽高设置的-->
<!-- <span>php中文网</span> -->
<!-- 总结:浮动使元素脱离了文档流,同时使行内元素也支持了宽高,表现出与块级元素一样的特征 -->
</body>
</html>Atas ialah kandungan terperinci css浮动的原理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css固定定位Artikel seterusnya：css同级元素之间的清除浮动的技巧