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 -
Comments
Post a Comment