基本图片与文字布局（浮动，包含块）

最新推荐文章于 2022-06-22 21:34:55 发布

Zjyyyy95

最新推荐文章于 2022-06-22 21:34:55 发布

阅读量4.4k

点赞数 2

分类专栏： css 文章标签： css 浮动图片布局

本文链接：https://blog.csdn.net/zhoujingying22/article/details/50952542

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

正常流中：

1.块级元素（<h> <p> <ul> <li>...）：换行，独自占一行显示，就算有足够的空间并排，也会在下一行显示，可以设置width宽度
2.行内元素（<img> <em> <q>...）：若有足够的空间并排，就会并排显示
3.定位为relative仍在流中

脱离正常流：

1.设置宽度width并浮动

2.定位为absolute 或 fixed

浮动父级元素：

错误原因：规定若父级包含块的元素都是浮动元素，则浏览器默认父级包含块高度为0，包含块只出现边框，原来所占的空间仍然存在。

解决方法1：（推荐）

CSS中父级包含块的属性里添加

 overflow:auto;     /*   或  overflow:hidden;  */

解决方法2：

为父级包含块设置高度height

height:400px;

解决方法3：

在包含块里最后添加

<br class="clear">

CSS中添加

  .clear{
              clear:both;
          }

例子

1.正常流中显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>divDistribution</title>
</head>
<body>
	<img src="pic1.jpg" alt="Picture of the article" width="159" height="203">
	<article>文本略
	</article> 
</body>
</html>

2.图片向左浮动

img{
		float: left;
	}

3.增加包含块并设置CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>divDistribution</title>
	<style type="text/css">
	
	img{
		float: left;
	}
	.sec{
		width:500px;
		background: #F0D8D8;
		border:1px solid #717070;
	}
	</style>
</head>
<body>
	<section class="sec">
		<img src="pic1.jpg" alt="Picture of the article" width="159" height="203">
		<article>文本略
		</article>
	</section>
</body>

4.文字向右浮动（必须设置width才能浮动），此时包含块中都是浮动元素，出现问题

article{
		float: right;
		width:320px;
	}

5.最后效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>divDistribution</title>
	<style type="text/css">
	
	img{
		float: left;
	}

	
	article{
		float: right;
		width:320px;
	}

	.sec{
		width:500px;
		/*height: 400px;*/     /*方法三*/
		background: #F0D8D8;
		border:1px solid #717070;
		overflow: auto;	            /*方法一*/
	}

	/*.clear{               方法二
		clear: both;
	}*/

	</style>
</head>
<body>
	<section class="sec">
		<img src="pic1.jpg" alt="Picture of the article" width="159" height="203">
		<article>文本略
		</article>
		<!-- <br class="clear"> -->   <!-- 方法二 -->
	</section>
</body>
</html>

Zjyyyy95

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
基本图片与文字布局（浮动，包含块）

正常流中：1.块级元素（ ...）：换行，独自占一行显示，就算有足够的空间并排，也会在下一行显示，可以设置width宽度2.行内元素（ ...）：若有足够的空间并排，就会并排显示3.定位为relative仍在流中脱离正常流：1.设置宽度width并浮动2.定位为absolute 或 fixed浮动父级元素：错误原因：规定若父级包含块的元素都是浮动元素，
复制链接

扫一扫