Help me to understand.

It is necessary to move the text below the figure:

<div id="news"> <img src="http://img.tyt.by/p/0e/f/1_stepway_version3.jpg" style="float:left; height:350px; width:458px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac convallis diam, in dapibusllus erat. Sed eget enim facilisis mauris teget pretium ultricies. Morbi eu tincidunt augue. </div> <br /> ТЕКСТ НУЖЕН НИЖЕ МАШИНЫ

  • 2
    You can take the text in this block: <div style="clear:both"> - splash58
  • I advise you to read the material on the Internet about what errors can occur when using float and how to clean up its properties. In principle, you are below, everything is right answered, but still I advise you to understand, otherwise the entire layout will float. - V. Rotenberh
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

5 answers 5

It is necessary immediately after the picture with the float to cancel the "floating" effect. To do this, assign the following element the style clear: left; (or more generally clear: both;

    you can add overflow:hidden to the news container

     #news { overflow: hidden; } 
     <div id="news"> <img src="http://img.tyt.by/p/0e/f/1_stepway_version3.jpg" style="float:left; height:350px; width:458px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac convallis diam, in dapibusllus erat. Sed eget enim facilisis mauris teget pretium ultricies. Morbi eu tincidunt augue. </div> <br />ТЕКСТ НУЖЕН НИЖЕ МАШИНЫ 

       <div id="news"><img src="http://img.tyt.by/p/0e/f/1_stepway_version3.jpg" style="float:none; height:350px; width:458px"><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac convallis diam, in dapibusllus erat. Sed eget enim facilisis mauris teget pretium ultricies. Morbi eu tincidunt augue. </div><br /> ТЕКСТ НУЖЕН НИЖЕ МАШИНЫ

      If you want the text to be under the picture, then why set the float: left ??? Above code as requested, text below! float: none - cancels left optekanie ... also added
      to start the text from a new line

        The fact of the matter is that float: sets the flow.
        In general, for a picture it is not necessary to use float: left in this case. All pictures are by default placed on the left (unless the parent block has been changed to, say, text-align: right ). Another thing is that this may require a specific task.

        In your case for the element that contains the text you need to add clear: both (both - for reliability).

        In this case, you are doing a double job: first ask the text to flow around the image ( float: left ), and then ask that it not flow around ( clear: both ). This is not necessary.

          This is how they do it in Bootstrap 3rd version. @toxxxa suggested almost the same thing, but why do this for the next element? After all, there is a pseudo-element :after

           #news:before, #news:after { content: " "; display: table; } #news:after { clear: both; } 
           <div id="news"> <img src="http://img.tyt.by/p/0e/f/1_stepway_version3.jpg" style="float:left; height:350px; width:458px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac convallis diam, in dapibusllus erat. Sed eget enim facilisis mauris teget pretium ultricies. Morbi eu tincidunt augue. </div> <br />ТЕКСТ НУЖЕН НИЖЕ МАШИНЫ