1、首先,我们应该先给div设置宽度和高度,保证文字有一个范围。
2、然后通过background给div添加一张图片作为它的背景。
3、接着可以通过url()来连接图片,url里面放置的就是背景图片的路径。
4、随意地放了一张图片用作背景,一定要注意,路径要写对。
5、这样,保存之后文字就会覆盖在图片的上面了。
通过浮动可以使一个元素向其父元素的左侧或右侧移动,我们使用float属性来设置于元素的浮动
注意,元素设置浮动以后,水平布局的等式便不需要强制成立 。元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动
(2)设置浮动以后元素会向父元素的左侧或右侧移动,
(3)浮动元素默认不会从父元素中移出
(4)浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
(5)如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
(6)浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
实际上,浮动属性一开始创建出来的原因就是为了实现文字环绕的效果的,只是后来大家发现利用浮动可以很好地处理页面布局的问题,所以现在更多时候是利用它来做布局的功能。。。
我们知道,块元素和行内元素在文档流中都有着各自的布局特点,比如块元素独占一行等。那么如果脱离了文档流,块元素和行内元素分别会有什么样的影响呢?
1、块元素不在独占页面的一行
2、脱离文档流以后,块元素的宽度和高度默认都被内容撑开
1、行内元素脱高文档流以后会变成块元素,特点和块元素一样
也就是说,一旦脱离文档流以后,我们就不需要再区分块和行内了。
我们可以看一下下面的案例,在没有使用 clear 属性前,对于两个兄弟元素,如果前者设置为浮动,那么由于其脱离了文档流,那么后者就会移动到前者原先的位置上。如果我们不想元素受到其他元素的浮动影响,那么就可以通过设置 clear 属性来解决这个问题。
clear底层实现的原理是:设置清除浮动以后,浏览器会自动为元素添加一个margin,以使其位置不受其他元素的影响
我们可以看下面这个案例,父 div 元素中包含着一个设置为浮动的 div 子元素,由于子元素设置为浮动,脱离了文档流,且父元素中没有指定高度,所以此时一旦子元素脱离了文档流后,就缺少了支撑起父元素高度的元素。相比于这样的效果,我们更希望即使子元素设置为浮动,但父元素依然可以包裹住子元素(或者说是有着子元素的高度,不至于塌陷)。
BFC(Block Formatting Context)块级格式化环境
BFC是一个css中的一个隐含的属性, 当元素开启BFC后,该元素会变成一个独立的布局区域 。可以理解为,此时元素内的后代元素不会再把其他样式传递到外面了。
元素开启BFC后的特点
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC
1、设置元素的浮动(不推荐)
2、将元素设置为行内块元素(不推荐)
需要注意的是,虽然开启元素的BFC环境可以解决高度塌陷的问题,但是这还不是最完美的解决方案,在某些特殊的环境下还是会有问题。
我们回顾一下,高度塌陷产生的原因是什么?主要是因为父元素没有设置高度,所以父元素的高度由子元素的高度决定,一旦子元素设置为浮动后脱离了文档流,那么此时父元素就会由于没有子元素的支撑而塌陷。
那么如果我们能够实现,手动在浮动的子元素后面放入一个无内容的块元素,且清除其受到的 float 影响,那么此时这个块元素就会落在浮动的元素下方,又由于(自身没有设置高度的)父元素的高度由子元素的高度决定,所以此时父元素因为要包裹新增的无内容块元素,也就自然可以包裹浮动的元素了。
所谓的clearfix样式,其实核心就是在第二种解决方式的基础上,对样式做一个进一步的封装,使其既可以解决高度塌陷的问题,还可以解决父子元素外边距重叠的问题。