欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

浮动元素的特点

  1. float元素的特点
  2. float元素的代码
  3. float代码效果图片

float元素的特点

  1. 浮动元素在一行显示
  2. 设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,浮动元素会依次从父级盒子的右侧向左排布
  3. 浮动元素自动具有块级元素的属性
  4. 浮动元素脱离文档流
  5. 浮动元素内的子元素,不会继承浮动属性
  6. 浮动元素下面的元素不能识别浮动元素的高度和位置

float元素的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.conten1,.conten2,.box{
width: 200px;
height: 200px;
float: left;
}
.conten1{
background-color: #1974A1;
}
.conten2{
background-color: #333333
}
.box{
background-color: aqua;
}
.box1,.box2{
width: 50px;
height: 50px;
float: right;
}
.box1{
background-color: darksalmon;
}
.box2{
background-color: coral;
}
span{
width: 200px;
height: 50px;
background-color: chartreuse;
float: left;
}
/*
浮动元素的特点
1.在一行显示
2.浮动元索会脱离文档流导致下而没有浮动的元索识别不了它的高度和位置就会往上跑占领浮动元素的位置
3.元素都是float:left左浮动元素从左往右依次排列
元索都是float:right右浮动元索从右往左依次排列
4.父元素浮动子元素并不会继承父元素的浮动如果想要子元素也在一行显
我们需要给子元系也加浮动的属性
5.浮动属性不能继承
6.浮动元素本身具有块元素的特点所以用了浮动就不需要再加 dispay: block了
7.所有的元素都可以用浮动属性
*/
</style>
</head>
<body>
<div class="conten1"></div>
<div class="conten2"></div>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<span>行内元素</span>
</body>
</html>

float代码效果图片

上一篇标题:文档流和脱离文档流
下一篇标题:多行文本出现省略号必备的条件(面试题)

相关文章

 

文章-浮动元素的特点发布日期:2021-04-01 17:16作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/251.html