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
, then it is possible to set the flow around this element by others. This property has the name
, 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 -
. With the value
the element is pressed to the left edge, and the flow around the other elements occurs along its right edge. With the value
- all the way around. Note that you need to set the width of the element to do this. Also
can make a difference
- 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
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
Streamline streamlining for the elements indicated after it. Value
means that any streamlining - left or right - will be canceled. Property
can also take values
- to cancel the same property value
. This rule is often used to insert an empty line between two floating elements.
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
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
Проверьте свои знания
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.