CSS float样式属性

HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，如何解决呢？通过子元素浮动即可解决。

插入两张图片：

        <div>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
		
		</div>
		<style>
			div{
				border: 1px solid red;
			}
		
		</style>

如图所示，两张图片之间有一个空格的间隙，怎么消除它呢？我们通过将图片进行浮动来去除：

	<div>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
	
		</div>
		<style>
			div{
				border: 1px solid red;
			}

			img{
				float: left;
			
			}
		</style>

如图所示，间隙确实去掉了，但是边框却出了问题，因为图片“浮起来了”，因此框中没有内容，所以出现了这种情况，怎么解决呢？我们通过禁止浮动来解决：

<div>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
			<div style="clear: left;"></div>/*禁止div浮动*/
		
		</div>
		<style>
			div{
				border: 1px solid red;
			}
			img{
				float: left;
			
			}
		</style>
	

我们还可以通过一种更简单的方法来解决：借用after伪元素：

<div>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
			<img src="img/{F9AA0DBB-BDE2-4BD1-90D7-99ED5B3EDB82}_20200715112523.jpg"/>
		
		</div>
		<style>
			div{
				border: 1px solid red;
			}
			div:after{
				content: "";/*增加内容为空*/
				display: block;/*块级显示*/
				clear: left;  /*禁止浮动*/
			}
			img{
				float: left;
			
			}
		</style>