The clear property cancels the floating effects, and stop the wrapping. : clear « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. clear

The clear property cancels the floating effects, and stop the wrapping.

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
          <head>
               <title>clear</title>
               <style rel='stylesheet' type='text/css'>
      img#left {
          float: left;
      }
      img#right {
          float: right;
      }
      p {
          clear: both;
          margin: 20px 0 0 0;
          font: 12px sans-serif;
          border: 1px solid rgb(200, 200, 200);
          background: rgb(244, 244, 244);
          padding: 5px;
      }

               
               </style>
          </head>
          <body>
              <img src='http://www.java2s.com/style/logo.png' alt='' id='left' />
              <img src='http://www.java2s.com/style/logo.png' alt='' id='right' />

             </p>
         </body>
      </html>








Related examples in the same category

1.Clear left
2.left clear to start a new line
3.clear right
4.clear: both
5.float: right and clear right
6.Use clear div as the divider
7.clear right and float right
8.clear left only