HTML/CSS/CSS Attributes and Javascript Style Properties/clear

Материал из Web эксперт
Перейти к: навигация, поиск

clear: both

   <source lang="html4strict">

<!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"> <head> <title>Easy Clearing method </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. parent1 {
 border: 5px solid purple;
 padding: 10px;

} .floatleft { 

 border: 5px solid red;
 float: left;
 width: 200px;
 background: white;

} .floatright { 

 border: 5px solid green;
 float: right;
 width: 200px;
 background: white;

} .clearfix:after { 

 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;

} .clearfix { 

 display: inline-table;

} </style> </head> <body>

This is the first parent container

This is floated content.

This is floated content.

</body> </html> 

</source>


"clear" Example

   <source lang="html4strict">

<html> <head> <style>

  1. secL { 
  position:absolute;

} .style1 { 

  clear:left!important;

} .style2 { 

  clear:none!important;

} </style> </head> <body> 

   <img src="http://www.wbex.ru/style/logo.png" 
        width="71" 
        height="99" 
        style="float:left">
       <a id="myL" 
          href="http://www.wbex.ru" 
          onClick="this.className="style2";return false" 
          onMouseOver="this.className="style1"">
          Disabled link
       </a>
   <img src="http://www.wbex.ru/style/logo.png" 
        alt="This is a float=right image" 
        width="79" 
   height="99">

</body> </html> 


     </source>


clear: left with float: left

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               p {
                   border: 1px solid black;
                   background: rgb(218, 218, 218);
                   line-height: 1em;
                   padding: 10px;
               }
               p#floated {
                   float: left;
                   margin: 10px;
               }
               p#cleared {
                   clear: left;
               }
           </style>
       </head>
       <body>

This is the text of the first paragraph.

This is the text of the second paragraph. 

       </body>
   </html>
</source>


clear: left with float right

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

  <html>
       <head>
           <title></title>
           <style type="text/css">
               body {
                   margin: 0;
                   padding: 8px;
               }
               p {
                   border: 1px solid black;
                   background: rgb(218, 218, 218);
                   line-height: 1em;
                   padding: 10px;
               }
               p#left {
                   width: 200px;
                   float: left;
                   margin: 10px;
                   background: #ccc;
               }
               p#right {
                   width: 200px;
                   float: right;
                   margin: 10px;
                   background: #aaa;
               }
               p#clear {
                   clear: left;
                   background: #eee;
               }
           </style>
       </head>
       <body>

This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.

This is the text of the third paragraph.

This is the text of the forth paragraph. 

       </body>
   </html>
</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/clear&oldid=4941»