CSS float 的加深,文本显示问题。
一、float使用后脱离原本文档流。
我简单编写了三个行块框1,2,3。原本显示如以下图一
设置son1为左浮动并且加长son2的宽度,发现son1脱离文本流不占据空间,并且覆盖住了son2,而son2中文本被挤出div son2.如以下图二
div son1设置浮动后就相当于设置了position:absolute,脱离文档流,但是不同的是,它脱离文档流并且向左或右移动,直到它的边缘碰到包含框的边缘。绝对定位则是相对于祖先元素中不是position 值为static的元素进行设置top、bottom、right、left。
如果三个son都设置左浮动,那么son1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框,如果如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间,如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。如以下图三
二、任何元素设置float属性后都会变为块级元素。
块级元素与行内元素的区别
- 块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,
- 一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效(注意,块级元素设置了width宽度属性后仍然是独占一行的)
- 块级元素可以设置margin,padding属性,行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。
<style type="text/css">
#son1{
border: 1px solid #ccc;
background-color: #f00;
width: 25vw;
height: 100px;
/*float: left;*/
}
#son2{
border: 1px solid #ccc;
background-color: #0f0;
width: 30vw;
height: 100px;
/*float: left;*/
}
#son3{
border: 1px solid #ccc;
background-color: #00f;
width: 25vw;
height: 100px;
/*float: left;*/
}
p{
font-size: 30px;
color: #fff;
}
</style>
我在son1中设置了宽和高因为span标签是行内元素所以并没有起到作用。如以下图四
当我把son1设置了左浮动后,宽和高起到了作用,span自动转变为了行内元素。如以下图五
三、A,B相连的块级元素,A设置为浮动后,B内文本显示问题。
css float属性的出现就是解决文字可以包围图片问题,所以当文本遇到浮动元素时不会被覆盖会挤出浮动元素的外边。在上图 图五中“son2”文本被挤到下方是因为父元素设置了宽,父元素右侧宽度撑不下文案。