巩义市网站建设,自创游戏的软件,万网创始人,网站空间格式asp文章目录 浮动什么是浮动浮动的特性清除浮动 往期回顾 浮动
什么是浮动
float属性用于创建浮动框#xff0c;将其移动到一边#xff0c;直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特性 浮动元素会脱离标准流(脱标) 浮动的元素会一行内显示并且元素顶部对… 文章目录 浮动什么是浮动浮动的特性清除浮动 往期回顾 浮动
什么是浮动
float属性用于创建浮动框将其移动到一边直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
浮动的特性 浮动元素会脱离标准流(脱标) 浮动的元素会一行内显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性
特性1设置了浮动float的元素最重要特性
脱离标准普通流的控制浮移动到指定位置动, 俗称脱标浮动的盒子不再保留原先的位置 特性2如果多个盒子都设置了浮动则它们会按照属性值一行内显示并且顶端对齐排列 注意 浮动的元素是互相贴靠在一起的不会有缝隙如果父级宽度装不下这些浮动盒子多出的盒子会另起一行对齐。
特性3 浮动元素会具有行内块元素特性。
任何元素都可以浮动。不管原先是什么模式的元素添加浮动之后具有行内块元素相似的特性。 如果块级盒子没有设置宽度默认宽度和父级一样宽但是添加浮动后它的大小根据内容来决定 浮动的盒子中间是没有缝隙的是紧挨着一起的 行内元素同理 实例移动
相当于把内容移动到最左/最右边(span)
!DOCTYPE html
html langen
headmeta charsetUTF-8title中国移动/title
/head
bodyspan中国/spanspan stylefloat: right移动/span
/body
/html块级标签使用浮动 可能使他”飘“起来脱离文档流 什么是文档流文档流是指在HTML文档中元素按照它们在HTML文档中的出现顺序依次从上到下排列形成一个连续的流 让块级标签不会独占一整行 !DOCTYPE html
html langen
headmeta charsetUTF-8title中国移动/titlestyle.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}/style
/head
bodydiv classc2text/divdiv classc2text/divdiv classc2text/divdiv classc2text/div
/body
/html清除浮动 为什么要清除浮动 由于父级盒子很多情况下不方便给高度但是子盒子浮动又不占有位置最后父级盒子高度为0时就会影响下面的标准流盒子。 清除浮动的本质 清除浮动的本质是清除浮动元素造成的影响 如果父盒子本身有高度则不需要清除浮动 清除浮动之后父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了 如果想解决脱离文档流的情况则需要加*style*clear: both
!-- 添加前 --
!DOCTYPE html
html langen
headmeta charsetUTF-8title中国移动/titlestyle.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}/style
/head
body
div stylebackground-color: bluediv classc2text/divdiv classc2text/divdiv classc2text/divdiv classc2text/div
/div
/body
/html!-- 添加后 --
!DOCTYPE html
html langen
headmeta charsetUTF-8title中国移动/titlestyle.c2{float: left;color: green;width: 50px;height: 60px;border: 1px solid red;}/style
/head
body
div stylebackground-color: bluediv classc2text/divdiv classc2text/divdiv classc2text/divdiv classc2text/divdiv styleclear: both;/div
/div
/body
/html所以一旦块级标签出现浮动一定要加*style*clear: both; 浮动带来的好处 父级可以不用设置高度只用子级设置高度子级可以撑起父级的高度以实现代码简化 /*控制父级边框*/
.header{background: #333;}/*控制子级边框*/
.container{width: 1226px;margin: 0 auto;
}/*控制子级边框下的左边菜单栏*/
.header .menu{float: left;}/*控制子级边框下的右边菜单栏*/
.header .account{float: right;color: #b0b0b0;
}/*控制子级边框下的菜单栏中的span标签*/
.header span{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin-right: 15px;
}/*效果图如下*/往期回顾
1.【快速开发网站】 2.【浏览器能识别的标签1】 3.【浏览器能识别的标签2】 4.【浏览器能识别的标签3】 5.【浏览器能识别的标签4】 6.【案例1用户注册】 7.【案例2用户注册改进】 8.【快速了解 CSS】 9.【常用选择器概念讲解】 10.【CSS基础样式介绍1】 11.【CSS基础样式介绍2】
