关于css浮动覆盖的问题

html-css038

关于css浮动覆盖的问题,第1张

html元素有几个是块级元素如p,h1-h6等，这些元素自带display block属性，元素间相当于会有一个换行符不能同排排列，除非定义浮动。而img是内联块元素也就是display inline-bloack，可以并排显示的。 两个元素一个加了浮动一个没加浮动，只会是浮动的优先排列在左或者右，也就是没有浮动的元素会被有浮动的拆队。除非2个元素都是浮动的他们才会老老实实的按顺序排在一起。浮动不是覆盖只是位置的先后罢了，便于将不同类型的元素并排。css里没有覆盖之说。你写的例子最终效果就是b图排在a图左边而已。

1、首先，我们应该先给div设置宽度和高度，保证文字有一个范围。

2、然后通过background给div添加一张图片作为它的背景。

3、接着可以通过url()来连接图片，url里面放置的就是背景图片的路径。

4、随意地放了一张图片用作背景，一定要注意，路径要写对。

5、这样，保存之后文字就会覆盖在图片的上面了。

浮动，你可以理解为漂浮在空中，然后它后面紧挨着但未设置浮动的元素则仍然在地上，并且填补了漂浮元素原来在地上所占用的位置，也就是说，非浮动元素“钻”到浮动元素的下面去了，所以被盖住了。

要想避免这种情况，必须让浮动元素清除浮动，最简单的方式就是给浅蓝色div加一个 overflow:hidden ，这样它在空中漂浮的同时也保留了它原来在地面占用的位置，这样后面的其他非浮动元素就不会移动位置了，也就不会被遮盖。