Home > Developer > Web Develop

Web front-end development learning----5. Understanding CSS Floating Float

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First you need to understand two concepts: inline elements, block elements.

Inline elements: Also called inline elements, which can hold text or other inline elements. The height width of an inline element is not set, and its width is the width of its own text or picture, and does not wrap. Common inline elements: <span></span>, <a></a>, </img>, <font></font>, < Strong></strong>, etc.

Block elements: can hold text, other inline elements, and block elements. You can set its height width. Repulsion is on the same line as other elements. Common block elements:

Then there is a problem, if we set up 3 div blocks, it will be arranged vertically according to the order in which the HTML documents are written.

The block element wraps automatically, and if we want it to be displayed in a row, how do we fix it? Of course, there are more ways than one. Today talk about the most common setup method, floating.

If the block element is set to float, it will float to the parent element's bounding box to the left or right as we specify, and it will not be in the standard flow (writing order) of the HTML document. Thus, the positioning of block elements is achieved.

For example, if we set the box 1 to the right float (float:lright), it will move out of the standard flow and float to the upper-right corner of the border. Because you are out of the standard stream, you can treat it as if it does not exist. Then box 2, Box 3 will move up. As shown in the following:

Note: If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, they may be "stuck" by other floating elements when they move down.

So if we want 3 boxes to be displayed on the same line, we need to set them all to the left float and have the appropriate size of the parent element border.

Give a common case, this is the NetEase picture News in the tab bar,

The top label needs to use JavaScript, I will be learning behind, today only need to implement the news picture and the following link, note: When the mouse moves to the bottom of the link is, the font changed to orange, and there are underscores appear.

Effect:

Full code

[HTML]View Plaincopy
  2. <head>
  4. <meta http-equiv= "content-type" content="Text/html;charset=utf-8">
  6. <title> NetEase Social news </title>
  8. <style type="Text/css">
  10. body,ul,li,p{margin:0; padding:0; font-size:12px;}
  12. img,p{width:170px; height:128px; margin-left:20px;}
  14. p{width:170px;height:30px;}
  16. ul{
  18. width:1000px;
  20. height:200px;
  22. List-style:none;
  24. border:1px solid Gray;
  26. padding-top:40px;
  28. padding-left:45px;
  30. margin:0 Auto;
  32. }
  34. li{
  36. Float:left;
  38. }
  40. a:link{
  42. Color:black;
  44. Text-decoration:none;
  46. }
  48. a:hover{
  50. Color:orange;
  52. Text-decoration:underline;
  54. }
  56. </style>
  58. </head>
  60. <body>
  62. <ul>
  64. <li>
  66.             < a href= "#"  title=" hornbills ">< img src= "img/1.jpg" /><p> our country experts first observed the field propagation process of crown-spotted hornbills </p></ a>  
  68. </li>
  70. <li>
  72. <a href="#" title="Earthquake"><img src="img/2.jpg"/> <p> Ludian earthquake-stricken children </P></a>
  74. </li>
  76.         <li >  
  78.             < a href= "#"  title=" drought ">< img src= "img/3.jpg" /><p> Henan lost more than 4 billion yuan due to drought </p></ a>    
  80. </li>
  82. <li>
  84.             < a href= "#"  title=" Xi ' an >< img src= "img/4.jpg" /><p> Xi ' an long drought every "dew"   People enjoy cool </p></ a>  
  86. </li>
  88. <li>
  90.             < a href= "#"  title=" Metro ">< img src= "img/5.jpg" /><p> Shanghai Metro three line early Peak Qi FA fault span class= "tag" ></p></ a>&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;
  92. </li>
  94. </ul>
  96. </body>
  98. </html>

Web front-end development learning----5. Understanding CSS Floating Float

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript and jquery interactive front end web development javascript and jquery interactive front end web development pdf best way to learn front end web development front end development languages front end development books front end web developer nanodegree best book for front end development

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More