Master the Float property in CSS

Tram Ho

Float – is it easy to learn?

Preamble

Learning HTML, CSS is the basic foundation on the path to becoming a professional Web developer. In particular, understanding the basic CSS properties is very important. Today, let’s learn about a very common but also very abstract property in CSS, the Float property.

Research

  • What is the Float attribute used for? Take a look at the following imageMenu uses float property
    This is the application of Float property in the website menu design.

     

  • Here is another example of how content is divided on the web page. When Float is not used
  • When used Float

    Thus, we somewhat understand the effect of this attribute in the process of building Front-end. So, how does the Float property work? By answering this question, you will control the website layout extremely easily.

    We know that the word “float” means “float”. A regular HTML page is presented as a flow, that is, like a text, one paragraph at a time on top of each other. However, when designing a website layout, there are elements that are not only distributed vertically, but also horizontally, as in the above example. The Float attribute was born for that purpose.
    The Float property has 5 values: none, left, right, initial and inherit. In which, left and right values ​​are used the most.
    When an element is applied the Float property, it floats above the HTML page (it seems to be invisible). At this point, the HTML page will assume this element does not exist, and move the bottom elements to replace it.

  • See the example below
    Layout according to the usual flow format. Box 1 has the Opacity property (see through)


    After Box 1 is applied the float: left;
    Now the HTML page will consider Box 1 does not exist, and the content below will move up. Box 2 is now occupied by Box1 (Box 2 is dark pink because Box 1 above has an opacity property).

    Note: The internal content of the element that takes the position of the float element will not follow it. As the picture above, Box 2 contains a text, but then it does not go with Box 2 but just below.

     

  • Now, when we apply float: left; What about all three boxes?
    At this point, all 3 boxes have emerged above the HTML page. This is how to design a horizontal menu from an unordered list (ul tag).

    Note: float: left; means “floats” to the left, float: right; is “floating” to the right.

Conclusion

The Float attribute is used a lot in website design, so mastering it will be very helpful for you!
In the following article, we will learn about the Clear property, this is the best friend of the Float property, which makes it easier to control the layout of the website, so let’s take a look!

Share the news now

Source : Viblo