Floating Elements tutorial


As noted earlier, block elements occupy the entire width of the allowed space (the child element), and also start with a new line. Also, all elements after the block also begin with a new line in the layout of the web page.

If you fix the width of an element using the property width , then it is possible to set the flow around this element by others. This property has the name float , as it seems that the element " плывет "in the environment of other elements - to the left or to the right.Thus, this property has two basic values - left or right . With the value left the element is pressed to the left edge, and the flow around the other elements occurs along its right edge. With the value right - all the way around. Note that you need to set the width of the element to do this. Also float can make a difference none - it is installed by default.



We see that the text outside the block is located to the right of it. In the absence of a rule float:left This text would be placed under the block - according to the properties of the block elements.

In order to cancel wrapping, just insert the element with the rule clear: both after the element with the rule float . Property clear Streamline streamlining for the elements indicated after it. Value both means that any streamlining - left or right - will be canceled. Property clear can also take values left or right - to cancel the same property value float . This rule is often used to insert an empty line between two floating elements.



Property float has its own characteristics, which can lead to unexpected results. One of them is the following situation. Suppose we put one block in another, and the inner block has a rule float: left



We see that the floating block does not actually hold back the outer one, and goes beyond its boundaries. To correct this effect, you need to add a rule

overflow: hidden;


per block bar :

Проверьте свои знания
Create style rules for the flower class, under which the element will "swim" to the right. Create the following style rules for the img tag inside the block of this class: height 50px; outer indent to the left 50px. Using the drawing insert a flower block with a picture in the header so that it is pressed to the left border of the header. The pattern tag must be placed in a block of the flower class. Place the image file in the img folder in the project root. Create a form tag. Inside the contact-form block, before the form, insert a header with the text of the Contact Form, the text color # 403E3F.