html - CSS `clear: both;` property inside body -


i reading html , css , produced following code.

			body {   				width: 752px;  				font-family: arial, verdana, sans-serif;  				color: #665544;  			}  			div {  				border: 1px solid #665544;  			}  			p {  				width: 230px;  				float: left;  				margin: 10px;  			}  			.clear {  				clear: both;  			}
<!doctype html>  <html>  	<head>  		<title>parent float - problem</title>  	</head>  	<body>  		<h1>the evolution of bicycle</h1>  		<div>  			<p class="one">in 1817 baron von drais invented walking machine him around royal gardens faster.</p>  			<p class="two">the device know draisienne (or "hobby horse") made of wood, , propelled pushing feed on ground in gliding movement.</p>  			<p class="three">it not seen suitable place other maintained pathway. </p>  			<p class="four clear">in 1865, velocipede (meaning "fast foot") attached pedals front wheel, wooden structure made extremely uncomfortable.</p>  			<p class="five>in 1870 first all-metal machine appeared. pedals attached directly front wheel.   			<p class="six">solid rubber tires , long spokes of large front wheel provided smoother ride predecessor.</p>  		</div>  	</body>  </html>

now, applied css rule clear: both; paragraph class clear. however, can see left hand side not touch other element inside body container, why still touch paragraph five on right hand side?

edit book reading shows no mention of clear applying preceding elements -

enter image description here


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -