自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

浮动元素的特点

作者:灰牛站长•发布时间:2021-07-12 11:03:27•浏览
  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代码效果图片

相关文章

  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之绝对定位

    定位之绝对定位

    定位元素元素层级元素定位滚动条 绝对定位- position: absolute;特点 脱离文档流 可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直...
    2021-07-12 11.07.13

手机端